css-flex布局

1. flex 是什么？

• flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

2. 为什么我们需要 flex?

• 解决元素居中问题

• 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

父级：

1. flex-direction 主轴方向

2. flex-wrap 主轴一行满了换行

3. flex-flow 1和2的组合

4. justify-content 主轴元素对齐方式

5. align-items 交叉轴元素对齐方式//单行

6. align-content 交叉轴行对齐方式//多行

   子级：

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

flex-direction属性决定主轴的方向（即项目的排列方向）。

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

flex-wrap属性默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

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

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

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

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

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

align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下，横向交叉轴始终自左而右。

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

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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