flex布局

一、flex布局是什么？

flex布局是弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局，设为flex布局后，子元素的float、clear、vertical-align属性将失效。

.box{
  display: flex;    //对于行内元素是 display: inline-flex;
}

二、基本概念

• 采用flex布局的元素称为flex容器，简称容器，它的所有子元素自动称为容器成员，称为flex项目，简称项目。
• 容器默认存在两根轴，水平的主轴和垂直的交叉轴；主轴的开始叫做main start，结束叫做main end，交叉轴的开始位置叫cross start，结束位置叫cross end。项目默认沿主轴排列。

三、容器属性

3.1 flex-direction属性

flex-direction属性决定主轴的方向

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

flex-direction有四种可能的值：

1. row（默认值）：主轴是水平方向，起点在左端
2. row-reverse：主轴是水平方向，起点在右端
3. column：主轴是垂直方向，起点在上沿
4. column-reverse：主轴是水平方向，起点在下沿

3.2 flex-wrap属性

flex-wrap属性决定如果一条轴线上排不下时如何换行

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

flex-wrap有三种可能的值：

1. nowrap（默认值）：不换行。如果item不设置宽度，那么会默认字的宽度，如果设置了宽度但超过了容器主轴长度，那么会压缩item
2. wrap：换行，第一行在上方
3. wrap-reverse：换行，第一行在下方

3.3 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

.box{
  flex-flow: <flex-direction> || <flex-wrap> ；
}

3.4 justify-content属性

justify-content属性定义项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

justify-content有五种可能的值：

1. flex-start（默认值）：左对齐
2. flex-end：右对齐
3. center：居中对齐
4. space-between：两端对齐，项目之间间隔相等，所有空白都在项目之间
5. space-around：每个项目两侧的间隔相等，所以项目之间间隔是边框与项目距离的两倍，在项目周围包裹空白

3.5 align-items属性

align-items属性定义项目在交叉轴上的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items有五种可能的值：

1. flex-start：交叉轴起点对齐
2. flex-end：交叉轴终点对齐
3. center：交叉轴居中对齐
4. baseline：项目的第一行文字的基线对齐
5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 align-content属性

align-content属性定义多根轴线的对齐方式

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

align-content有五种可能的值：

1. flex-start：与交叉轴的起点对齐
2. flex-end：与交叉轴的终点对齐
3. center：与交叉轴的中点对齐
4. space-between：与交叉轴两端对齐，轴线间的距离平均分配
5. space-around：每根轴线两端的距离都相等，所有轴线间距离是轴线和边框距离的两倍
6. stretch（默认值）：如果项目没有设置高度或设为auto，那么将占满整个交叉轴

四、项目属性

4.1 order属性

order属性定义项目的排列顺序，默认数字为0，数值越小，排序越靠前。该属性接受负值。

.item {
  order: <integer>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果剩余空间也不放大。如果所有项目的flex-grow属性都为1，则他们将等分剩余空间。

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

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认是1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，则他们会等比例缩小。该属性不接受负值。

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

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，默认是auto，即项目的本来大小。

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

4.5 flex属性

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

.item {
  flex: <flex-grow> || <flex-shrink> || <flex-basis>
  flex: none (0,0,auto) | auto(1,1,auto)
}

上述代码中，定义flex时有两个快捷值，第一个是none，指的是不放大也不压缩，第二个是auto，指的是放大也缩小。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性，默认值为auto，即继承父元素的align-items属性

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