flex布局

flex布局

1、对比

传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

flex布局

• 操作方便，布局极其简单，移动端使用比较广泛
• pc端浏览器支持情况比较差
• IE11或更低版本不支持flex或仅支持部分

2、容器与项目

将一个元素的display值设为flex或inline-flex，此元素就变成了容器。

容器可以设置为两个值 flex，inlie-flex

区别

• felx：容器成为块元素
• inline-flex：容器成为行内块元素，不会占满全屏

flex容器的所有子元素都叫flex项目，但是项目的子元素不叫项目，除非设置项目也为容器

• 元素排列为一行 (flex-direction 属性的初始值是 row)。
• 元素从主轴的起始线开始。
• 元素不会在主维度方向拉伸，但是可以缩小。
• 元素被拉伸来填充交叉轴大小。
• flex-basis 属性为 auto。
• flex-wrap 属性为 nowrap。

3、主轴和交叉轴

主轴由 flex-direction 定义，另一根轴垂直于它。也就是说，主轴和交叉轴不是固定的，而是可以自己定义。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iYY8Ipqt-1617352616489)(http://qiniu.yaoyao.info/bg2015071004.png)]

从上面图中可以看到如下几点

• 默认情况下，水平方向是主轴，垂直方向是交叉轴，但可以通过 flex-diretion 属性更改
• 注意上面的 main start、main end、cross start、cross end，表示的是主轴以及交叉轴的开始和结束位置，可以作为设置容器中项目位置的关键字
• 项目被设置容器后，也拥有主轴和交叉轴

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

4、容器属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

4.1flex-direction

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

4.2justify-content

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

4.3flex-wrap

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

4.4align-content

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

4.5align-items

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

4.6flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

5、项目属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

5.1order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

5.2flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

5.3flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

5.4flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5.5flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

5.6align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1 auto`。后两个属性可选。

5.6align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。