Felx布局

align-content

align-content是当父元素所包含的行在交叉轴方向有空余部分时如何分配空间。与justify-content在主轴上如何对单个子元素对齐很相似。

注意：当只有一行的时候，该属性并不起作用。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

译者注：该属性中的六个属性值与justify-content中的六个属性意思相似，不同之处在于justify-content沿主轴方向的作用于单个子元素，而align-content沿交叉轴方向作用于行。遂不再赘述各属性值含义。

译者注：注意align-items和align-content的区别，前者是指在单行内的子元素对齐方式，后者是指多行之间的对齐方式。

父元素属性总结

  display: flex|inline-flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start | flex-end | center | baseline | stretch;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子元素属性

order

默认情况下，子元素按照代码书写的先后顺序布局，但order属性可以更改子元素出现的顺序。

.item {
  order: <integer>;
}

译者注：order的默认值为0;子元素的order值越小，布局越排在前面，参考例图理解。

flex-grow

flex-grow规定在空间允许的情况下，子元素如何按照比例分配可用剩余空间。如果所有的子元素的属性都设定为1，则父元素中的剩余空间会等分给所有子元素。如果其中某个子元素的flex-grow设定为2，则在分配剩余空间时该子元素将获得其他元素二倍的空间（至少会尽力获得）。

.item {
  flex-grow: <number>; /* default 0 */
}

注：flex-grow不接受负值。

译者注：默认值为0，意味着即使有剩余空间，各子元素也不会放大。

flex-shrink

与flex-grow属性类似，flex-shrink定义了空间不足时项目的缩小比例。

.item {
  flex-shrink: <number>; /* default 1 */
}

注： flex-shrink不接受负值。

译者注：flex-shrink默认值为1， 当所有子元素都为默认值时，则空间不足时子元素会同比例缩小。如果其中某个子元素的flex-shrink值为0，则空间不足时该子元素并不会缩小。如果其中某个子元素的flex-shrink值为2时，则空间不足时该子元素会以二倍速度缩小。

flex-basis

flex-basis定义了在计算剩余空间之前子元素默认的大小。可以设置为某个长度（e.g. 20%, 5rem, etc.）或者关键字。关键字auto意味着子元素会按照其本来的大小显示。关键字content意味着根据内容来确定大小——这个关键字到目前没有被很好地支持，所以测试起来比较困难，与content的类似的关键字还有max-content, min-content, fit-content。

.item {
  flex-basis: <length> | auto; /* default auto */
}

如果设置为0, 则子元素内容周围的空隙不会根据flex-grow按比例分配，如果设置为auto，则子元素周围额外的空袭会根据flex-grow按照比例分配，如下图：

flex

flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。其中第二个和第三个参数(flex-grow,flex-basis)是可选的。默认值为0 1 auto。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

推荐使用缩写形式而不是单独地设置每一个属性，缩写形式中会智能地计算出相关值。

align-self

通过设置某个子元素的align-self属性，可以覆盖align-items所设置的对齐方式。属性值与align-items中的意义相同，不再赘述。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

注：float,clear和vertical-align对flex子元素没有任何影响。