本文为学习flex布局时的知识梳理与总结。

什么是flex布局

flex布局的官方说法是CSS3弹性盒子(Flexible Box 或 Flexbox)，很适合在页面布局必须适应不同屏幕尺寸和不同显示设备时进行使用。

弹性容器(Flex container)

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

弹性项目(Flex item)

弹性容器里子元素自动成为弹性项目，并且弹性项目的float、clear和vertical-align属性将失效。

轴(Axis)

主轴（main axis）——弹性成员沿其排列的轴称为主轴
交叉轴（cross axis）和主轴垂直的轴称为侧轴或交叉轴。
每一个弹性布局容器都包含两个轴，这两个轴决定了容器里的项目整体布局效果。

方向

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

行

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

容器属性

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

flex-direction

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

1
2
3

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

row（默认值）主轴为水平方向，起点在左端。
row-reverse 主轴为水平方向，起点在右端。
column 主轴为垂直方向，起点在上沿。
column-reverse 主轴为垂直方向，起点在下沿。
flex-wrap

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

1
2
3

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

nowrap 是默认的，表示弹性成员不换行
wrap 表示换行，第一行在上方
wrap-reverse 表示换行，第一行在最下方

flex-flow

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

1
2
3

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

justify-content

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

flex-start，主轴起点对齐（左对齐）
flex-end，主轴终点对齐（右对齐）
center，主轴居中对齐
space-between，两端对齐，每个项目之间间隔相等。
space-around，均匀对齐，项目两端的间距相等。

align-items

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

stretch （默认）如果项目未设置高度或者高度为auto,那么项目拉伸充满整个侧轴。
flex-start 侧轴的起点对齐。
flex-end 侧轴终点对齐。
center 侧轴的居中对齐。
baseline: 第一行文字的底部对齐。
align-content

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

flex-start：与侧轴的起点对齐。
flex-end：与侧轴的终点对齐。
center：与侧轴的中点对齐。
space-between：与侧轴两端对齐，轴线之间的间隔平均分布。
space-around：在侧轴上均匀分配弹性元素。相邻行元素间距离相同，第一行元素到边框的距离和最后一行元素到行尾的距离是相邻行元素之间距离的一半。

项目属性

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

order

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

align-self

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

flex-grow

该属性定义项目的拉伸放大比例。默认为0，负值无效。当容器有剩余空间时不放大。

flex-shrink

该属性定义项目的收缩比例，默认为1，随着容器缩小而等比例缩小。
如果设置为0，项目将不缩小。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，负值无效。

flex-basis

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

flex

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