CSS-flex布局（B站黑马程序员）

一、flex布局原理

dispaly:flex;

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

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性都将失效。

二、flex布局父项常见属性

1、flex-direction设置主轴方向

默认的主轴方向是x轴方向，水平向右；默认的侧轴方向是y轴方向，垂直向下。子元素跟着主轴排列。

flex-direction：row  设置主轴方向是x轴方向，从左到右，侧轴是y轴方向。

flex-direction：row-reverse  设置主轴方向是x轴方向，从右到左，侧轴是y轴方向。

flex-direction：column  设置主轴方向是y轴方向，从上到下，侧轴是x轴方向。

flex-direction：column-reverse  设置主轴方向是y轴方向，从下到上，侧轴是x轴方向。

2、justify-content设置主轴上的子元素排列方式

注意：在设置此属性之前，一定要确定主轴。

justify-content：flex-start   默认值，从头部开始。如果主轴是x轴，则从左到右。

justify-content：flex-end    从尾部开始。

justify-content：center       在主轴居中对齐。如果主轴是x轴，则居中对齐。

justify-content：space-around   平分剩余空间。

justify-content：space-between 先两边贴边，再平分剩余空间。

3、flex-wrap设置子元素是否换行

默认情况下，项目都排在轴线上，不换行。

flex-wrap：nowrap   默认值，不换行。

flex-wrap：wrap       换行。

4、align-items设置侧轴上的子元素排列方式（单行）

注意：此属性在子项为单行时使用，也就是不换行的情况。

align-items：flex-start    从上到下

align-items：flex-end    从下到上

align-items：center       挤在一起居中

align-items：stretch      拉伸，默认值

5、align-content设置侧轴上的子元素排列方式（多行）

注意：此属性在子项为多行时使用，也就是换行的情况。

align-content：flex-start   默认值，从侧轴的头部开始。

align-content：flex-end    从侧轴的尾部开始。

align-content：center       在侧轴居中对齐。

align-content：space-around   在侧轴平分剩余空间。

align-content：space-between 在侧轴先两边贴边，再平分剩余空间。

align-content：stretch       设置子项元素高度平分父元素高度。

6、flex-flow复合属性

flex-flow：row wrap 相当于flex-direction和flex-wrap的复合属性

三、flex布局子项常见属性

1、flex

flex 定义子项分配剩余空间，占多少份数

2、align-self控制子项自己在侧轴上的排列方式

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

3、order定义项目的排列顺序

数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。