详解 Flex 布局

前言:

FlexBox不只在前端中应用普遍，同时在移动端也占有很是重要的地位，好比 iOS 中的UIStackView，Facebook 的 Yoga 库；微信小程序和 RN 都支持这种布局方式。各大浏览器对 FlexBox 支持比较完善，尤为对于移 Web，iOS 和 Android 在很早的版本中就支持了这种布局。全部我建议不管是移动端，仍是泛前端的同窗都应该学习一下这种布局方式。

备注:FlexBox 布局能够经过 flex-direction 来控制 flex-item 的布局方向

概念

须要解释几个概念：
flex-container：布局容器，使用 display：flex 的标签；
flex-item: 容器中的直接子元素；
main-axis：主轴，布局方向为 row 或者 row-reverse 时它是水平方向。布局方向为 column 或者 column-reverse 时它是垂直方向。
cross-axis: 纵轴，与主轴垂直的轴；
main-start: 主轴的起点，布局方向为 row 时它的起点在左侧，row-reverse 为右侧。布局方向为 column 时起点在顶部，column-reverse 时起点为底部。
main-end: 主轴结束的点，与 main-start 相反；
cross-start: 纵轴的起点；
cross-end：纵轴的结束点，与 cross-start 相反
复制代码

1. flex-direction:

• flex items 默认都是沿main axis(主轴) 从 main start 开始向 main end 排布
• flex-direction决定了 main axis(主轴) 方向, 有四个取值:

row（默认）：从水平方向的左侧开始布局；
row-reverse：从水平方向的右侧开始布局；
column：从垂直方向的顶部开始布局；
column-reverse: 从垂直方向的底部开始布局；
复制代码

2. justify-content :

决定了 flex items 在 main axis(主轴)上的对齐方式,主轴不必定是水平方向，不能把 justify-content 看作是控制水平方向的对齐方式。它主要有如下几个值：

flex-start（默认）：与主轴的起始位置（main start）对齐；
flex-end：与主轴的结束位置（main end）对齐；
center：居中于主轴；
space-around: 每一个 item 的间距相等, flex item 之间的距离相等, flex item 与main start 和 main end之间的距离是flex items 之间距离的一半；
space-evenly: 每一个 item 的间距相等, flex item 之间的距离相等, flex item 与main start 和 main end之间的距离等于flex items 之间的距离；
space-between: 左右无边距, flex item 之间的距离相等,左右两边与 main start 和 main end 对齐；
复制代码

3.align-items

flex-start：与纵轴的起始位置（cross start）对齐；
flex-end：与纵轴的结束位置（cross end）对齐；
center：居中与纵轴；
baseline：与基准线对齐；
stretch(默认）：当flex items在cross axis方向上的size为auto时,会自动拉伸填充至flex container
复制代码

4.flex-wrap

决定了flex container是多行仍是单行

nowrap（默认）：单行显示；
wrap：多行显示；
wrap-reverse：多行显示；
复制代码

5.flex-flow

它是 flex-direction 和 flex-wrap 的简写，

好比 flex-flow: row nowrap 等价于
 flex-direction : row
flex-wrap : nowrap。
复制代码

6.align-content

决定了多行flex item 在 cross axie 方向上的对齐方式,用法和 justify-content 类似

strech(默认值):与align-items的 strech相似
fles-start: 与cross start 对齐
fles-end: 与cross end 对齐
center: 居中对齐
space-around: 每一个 item 的间距相等, flex item 之间的距离相等, flex item 与cross start 和 cross end之间的距离是flex items 之间距离的一半；
space-evenly: 每一个 item 的间距相等, flex item 之间的距离相等, flex item 与cross start 和 cross end之间的距离等于flex items 之间的距离；
space-between: 左右无边距, flex item 之间的距离相等,左右两边与 cross start 和 cross end 对齐；
复制代码

7. order

决定了 flex items的排布顺序

• 能够设置任意整数(正整数 负整数 0), 数值越小排下越前面
• 默认值都是0

8. align-self

flex items 能够经过 align-self 覆盖 flex container设置的 align-items

auto(默认值): 遵循flex container的align-items设置
strech flex-start flex-end center baseline 效果跟align-items一致
复制代码

9. flex-grow

决定了flex items 如何扩展,它的做用就是，当全部的 item 未占满容器的宽度时，item 该如何扩充本身以填满容器的剩余空间。理解这个属性前关键要理解剩余空间，在 flex 容器中，若是全部 item 的宽度和小于容器的宽度，那么容器的剩余空间等于容器宽度减去全部item宽度的和。

• 每一个 item 的宽度为 150px，容器宽度为 600 px，剩余空间为 600 - 3*150 = 150px， 一图胜千言：

  

• 若是给每一个 item 设置 flex-grow 为 1，它表示每一个 item 占用相同比例的剩余空间，这样每一个 item 增长的宽度为 150 * 1/3 = 50px。最终效果变成：

  

• flex-grow 的默认值为 0，表示即便有剩余空间，item 也不会扩充。它不能为负数，可是能够为小数，若是上面的例子中，给每一个 item 设置 flex-grow 为 0.2，这样每一个 item 增长的宽度为 150 * 0.2 = 30px，最终还会有 60px 的剩余空间未被占用。

  

  总之 flex-grow 的值能够理解成比例，总剩余空间能够当作 1，剩余空间会受 flex-basis 影响，下面会提到这个属性的使用。还有一点须要明确，item 增加会受 max-width 的影响，增加后的最大长度只能是 max-width。 #####9.flex-shrink （收缩比例）：占缺乏空间的比例（item*shrink做为收缩比例），当全部的 item 的宽度和大于容器的宽度，就会出现容器空间不足的状况，这时能够经过缩放比例来缩放每一个 item 的宽度。
• 假如每一个 item 的宽度为 250px，容器宽度为 600 px，缺乏空间为 600 - 3*250 = -150px， 一图胜千言：

  

• 一旦出现空间不足，能够经过 flex-shrink 控制每一个 item 是否要进行缩放，缩放的比例是多少。若是设置 flex-shrink：1，每一个 item 将缩放一样的宽度，其值为 150 * 1/3 = 50px，效果以下：

  

  flex-shrink 的默认值是 1，也就是说当空间不足的时候，item 会以一样的尺寸进行缩放。可是这个属性和 flex-grow 在极端的状况下表现并不相同，由于在缩小的过程当中，不会把 item 的尺寸缩小到 0，它会受 min-content 的影响，也会受 min-width 的影响，缩到必定尺寸后它就再也不进行缩放了。

10.flex-basis

用来设置 flex items 在 main axis方向上的base size

auto (默认)：content取决于自己内容的size
决定flex items最终base size因素优先级由高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
复制代码