CSS - Flex布局

对容器指定flex布局。

.container {
  display: flex;
  display: -webkit-flex; /* Safari */
}

Webkit 内核的浏览器，必须加上-webkit前缀。

flex-direction

指定容器内项目的主轴排序方向。

• row（默认值）：水平从左往右。

• row-reverse：水平从右往左。

• column：垂直从上往下。

• column-reverse：垂直从下往上。

flex-wrap

指定容器内项目超出边界换行方式。

• nowrap（默认）：不换行。

• wrap：换行，超出边界的元素换行（下方）排列。

• wrap-reverse：换行，超出边界的元素换行（上方）排列。

justify-content

指定容器内的项目主轴方向对齐方式。

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center：居中

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。

对齐方式跟flex-direction属性有关。

align-items

指定容器内的项目在交叉轴（与主轴垂直方向）上的对齐方式。

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline: 项目的第一行文字的基线对齐。

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

order

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

flex-grow

指定项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink

指定项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis

指定项目占据的主轴空间，默认值为auto，即项目的本来大小。

align-self

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

flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

• auto：1 1 auto

• none：0 0 auto