前端面试中css部分经常会被问到flex布局，我之前对于flex布局只是大概知道怎么用，但是对于里面的一些属性还不太熟悉，这里总结一下以加深记忆。

什么是flex布局

flex布局的官方说法是CSS3弹性盒子(Flexible Box 或 Flexbox)，很适合在页面布局必须适应不同屏幕尺寸和不同显示设备时进行使用。而且flex布局的元素可以在各个方向上进行布局，不使用浮动等，对以往的块模型进行了改进。

弹性容器

采用flex布局的元素称为弹性容器，通过设置元素的display属性值为flex或inline-flex来定义弹性容器，它的子元素就自动成为容器成员。值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。

弹性容器的每个子元素都称为弹性成员。

每一个弹性布局容器都包含两个轴，弹性成员沿其排列的轴称为主轴，和主轴垂直的轴称为侧轴。

方向是弹性成员依次排列的方向，比如从左到右，或者从上到下。

弹性项目可以排列在单个行或者多个行中。

以下几个属性可以用在容器上，来设置相应的布局规则。

该属性用来确定主轴，即弹性成员排列的方向是水平从左往右还是从右往左，还是垂直从上往下还是从下往上。

1
2
3

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-warp属性设置弹性项目是排布在单行还是多个行中，该属性可以控制侧轴的方向。

1
2
3

.box {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow是flex-direction和flex-wrap属性的简写，决定弹性项目如何排布。

1
2
3

.box {
  flex-flow: (flex-direction) (flex-wrap)
}

该属性定义了项目在主轴上的对齐方式，常用的属性如下：

该属性定义项目在侧轴上如何对齐，常用的属性如下：

该属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，主要取值如下：

项目元素也可以设置相应属性。

该属性将元素与序号关联起来，以此决定哪些元素先出现，即数值越小排列越靠前，默认为0。

该属性定义项目的拉伸因子，即放大比例。默认为0，负值无效。

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

该属性定义项目元素在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话，那么这个属性就决定了flex元素的内容盒（content-box）的宽或者高的大小。

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

该属性定义单个项目的对齐方式，并覆盖align-items的值。如果任何flex元素的侧轴方向margin值设置为auto，则会忽略align-self。该属性的取值可参考align-items属性。

由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有效果：