（三）移动端前端开发-Flex弹性盒布局

一、Flex作用

• 控制元素的对其、排列。
• 可以自动计算布局内元素的尺寸。
• 控制元素在页面的布局方向。
• 对屏幕上的元素重新排序。

二、语法

• 块级元素： display : flex ;
• 行内元素： display : inline-flex ;
• 注意
  • 在webkit内核的浏览器中使用必须加上-webkit-前缀。display: -webkit-flex
  • 设为Flex布局以后，flex item的float、clear和vertical-align属性将失效。

三、属性：

1. 容器属性

1.1 flex-direction——主轴方向

• 语法：flex-direction : row | row-reverse | column | column-reserve ;
• 属性值含义：
  • row、row-reverse：主轴为水平方向，起点在左端（默认）、右端。
  • column、column-reverse：主轴为垂直方向，起点在上沿、下沿

1.2 flex-wrap——轴线排不下，换行操作

• 语法：flex-wrap : nowrap | wrap | wrap-reverse ;
• 属性值含义
  • nowrap：不换行。（默认）
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

1.3 flex-flow——复合模式

• 语法： flex-flow : < flex-direction > || < flex-wrap> ；
• 属性值：取两个属性的值即可。

1.4 justify-content——主轴对齐方式

• 语法：justify-content : flex-start | flex-end | center | space-between | space-aroung ;
• 属性值含义：
  • flex-start：左对齐（默认）
  • flex-end：右对齐。
  • center：居中。
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。

1.5 align-items——项目在交叉轴上对齐方式

• 语法：align-items : flex-start | flex-end | center | baseline | stretch ;
• 属性值含义
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline：项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

1.6 align-content——多根轴线对齐方式

• 语法：align-content : flex-start | flex-end | center | space-between | space-around | stretch ;
• 属性值含义：
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。
  • stretch：（默认值）轴线占满整个交叉轴。会拉伸容器内每个项目所占用的空间，填充方式为，每个项目下方增加空白，第一个默认从容器顶端开始排列。

2. 项目属性

2.1 order——定义项目的排列顺序

• 语法：order : ；
• 属性值：
  • 默认为0。
  • 可以是正数也可以是负数。

2.2 flex-grow——项目放大比例。

• 用来分配剩余空间。
• 语法： flex-grow : ;
• 属性值
  • 不能为负数。
  • 默认为0。

2.3 flex-shrink——项目缩小比例

• 语法：flex-shrink : ;
• 属性值
  • 负值无效。

2.4 flex-basis

• 在flex-grow和flex-shinrk属性起作用之前，定义每一个flex项目的默认大小，默认值为auto，即项目的本来大小。
• 语法：flex-basis : auto | ;
• 属性值
  • length：平常用的属性值如px、rem等。

2.5 flex——复合属性

• 语法：flex :auto | <‘flex-grow’> [ <‘flex-shrink’> <‘flex-basis’> ] ;
• 属性值
  • flex：auto；
  • flex： none; 代表0，0，auto。

2.6 align-self——交叉轴上的对齐方式

• 可以覆盖align-items属性。
• 语法：align-self : auto | flex-start | flex-end | center | baseline | stretch ;
• 属性值
  • 默认值为auto，表示继承父元素的align-items属性。
  • 可能取六个值，除了auto，其他都与align-items属性完全一致。

四、flex布局注意点

• flex-direction的改变，一些依赖于主轴定义的属性也跟着改变。
  • justify-content
  • align-content
  • align-items
• 容器转为flex布局之后，项目不受float的影响。
• flex-wrap的默认是nowrap，需要设置才会自动换行。