css布局之flex布局

一、flex布局原理

flex是flexible Box的缩写，意思是“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都能指定为flex容器。

1. 当我们为父盒子设为flex布局以后，子元素的float,clear,vertical-align属性将失效。
2. 伸缩布局=弹性布局=伸缩盒布局=flex布局

布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

采用flex布局的元素 ，称为flex容器（flex container），他的所有子元素自动成为容器成员，称为flex项目（flex item）。

二、flex布局父项常见属性

x轴为水平方向，y轴为垂直方向。

【1】flex-direction

• row（默认值）：子元素沿x轴排列，侧轴为y轴。
• row-reverse：子元素沿x轴排列且子元素颠倒，侧轴为y轴。
• column：子元素沿y轴排列，侧轴为x轴。
• column-reverse：子元素沿y轴排列且子元素颠倒，侧轴为下轴。

【2】justify-content

• flex-start（默认值）：元素在主轴方向上从头排起。
• flex-end：元素在主轴方向上从尾排起。
• center：元素在主轴方向上从中间排起。
• space-between：元素在主轴方向上先在首尾两端各排列一个元素，剩下的元素平分剩下的空间。
• space-around：元素在主轴方向上平分所有的空间。

【3】flex-wrap

• warp：换行显示。
• nowarp（默认值）：不允许换行，同一行缩小显示所有子元素显示。

【4】align-content

子元素多行情况下。

• flex-start：所有元素在侧轴方向上按容器的顶部对齐。
• flex-end：所有元素在侧轴方向上按容器的底部对齐。
• center：所有元素在侧轴方向上居中对齐。
• space-around：所有子元素平分侧轴方向上的所有空间。
• space-between:所有子元素会贴紧侧轴方向来评分所有空间。

【5】align-items

子元素单行情况下

• stretch（默认值）：元素在侧轴方向上被拉伸到父容器的高度。
• flex-start：元素在侧轴方向上按容器的顶部对齐。
• flex-end：元素在侧轴方向上按容器的底部对齐。
• center：元素在侧轴方向上居中对齐。

【6】flex-flow

• 简写属性，可以将flex-direction和flex-wrap组合为简写属性flex-flow。第一个指定的值为flex-direction属性值，第二个指定的值为flex-warp值。

三、flex布局子项常见属性

【1】flex

定义子元素分配的剩余空间，表示占多少份数。默认值为0。例：flex:1

【2】align-self

允许单个元素自定义自己的在侧轴方向上的排列方式。可覆盖父容器中定义的子元素排列方式（align-items）

• auto（默认值）：继承父容器的align-items属性。
• stretch：沿主轴方向拉伸元素。
• center：沿主轴方向居中。
• flex-start：元素在主轴方向上按容器的顶部对齐。
• flex-end：元素在主轴方向上按容器的底部对齐。
• baseline： 元素位于容器的基线上。

【3】order

定义子元素的排列顺序，数值越小排越前。