flex 容器基础概念

display: flex & flex-direction

flex-direction 默认 row , 横向布局; column, 垂直布局;

column-reverse, 反向垂直布局; row-reverse, 反向横向布局;

flex 元素增长

flex-basis & flex-grow

flex-basis 一般情况可以直接用 width, 如果定义 width, flex-basis: auto 会直接使用 width 的值。 未设置 width, 默认为 min-content, 一个单词的宽度。

flex-grow 在 flex 容器中分配剩余空间的相对比例。属性值为 number， 默认为 0， 负值无效。

flex 元素收缩

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

默认值 1 ， flex-shrink 属性只能是一个 number, 且不能为负值.

flex 多行

为了实现多行效果，请为属性 flex-wrap 添加一个属性值 wrap。现在，如果您的项目太大而无法全部显示在一行中，则会换行显示。下面的实时例子包含已给出宽度的项目，对于 flex 容器，项目的子元素总宽度大于容器最大宽度。由于 flex-wrap 的值设置为 wrap，所以项目的子元素换行显示。若将其设置为 nowrap，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始 Flexbox 值。如果项目的子元素无法缩小，使用 nowrap 会导致溢出，或者缩小程度还不够小。

  .box {
    display: flex;
    flex-wrap: wrap;
  }

flex 简写

flex-flow

你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

  .box {
    display: flex;
    flex-flow: row wrap;
  }

flex

你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

flex 简写形式中的数值更改为不同数值，但要记得第一个数值是 flex-grow。赋值为正数的话是让元素增加所占空间。第二个数值是 flex-shrink — 正数可以让它缩小所占空间，但是只有在 flex 元素总和超出主轴才会生效。最后一个数值是 flex-basis；flex 元素是在这个基准值的基础上缩放的。

大多数情况下可以用预定义的简写形式。在这个教程中你可能经常会看到这种写法，许多情况下你都可以这么使用。下面是几种预定义的值：

flex: initial flex: auto flex: none

flex: number

flex: initial 是把 flex 元素重置为 Flexbox 的初始值，它相当于 flex: 0 1 auto。在这里 flex-grow 的值为 0，所以 flex 元素不会超过它们 flex-basis 的尺寸。flex-shrink 的值为 1, 所以可以缩小 flex 元素来防止它们溢出。flex-basis 的值为 auto. Flex 元素尺寸可以是在主维度上设置的，也可以是根据内容自动得到的。

flex: auto 等同于 flex: 1 1 auto；和上面的 flex:initial 基本相同，但是这种情况下，flex 元素在需要的时候既可以拉伸也可以收缩。

flex: none 可以把 flex 元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是一样的。元素既不能拉伸或者收缩，但是元素会按具有 flex-basis: auto 属性的 flexbox 进行布局。

常看到的 flex: 1 或者 flex: 2 等等。它相当于 flex: 1 1 0 或者 flex: 2 1 0。元素可以在 flex-basis 为 0 的基础上伸缩。