flex布局

1、什么是flex布局

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

2、为什么我们需要 flex?

• 解决元素居中问题

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

3、flex 常用的属性都有哪些

1. flex-direction 主轴方向 最常使用
2. flex-wrap 主轴一行满了换行最常使用
3. justify-content 主轴元素对齐方式最常使用
4. align-items 交叉轴元素对齐方式//单行最常使用
5. flex-flow 等于说是flex-direction和flex-wrap的组合
6. align-content 交叉轴行对齐方式//多行

4、每个属性的属性值都有哪些分别是什么？

1. flex-direction

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

2. flex-wrap

   nowrap (默认值) 不换行压缩宽度
   wrap 换行
   wrap-reverses 反向换行

3. justify-content

   flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
   flex-end 靠着main-end对齐//参考常见术语(一般是右方向)
   center 靠着主轴居中对齐//一般就是居中对齐
   space-between 两端对齐，靠着容器壁，剩余空间平分
   space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
   space-evenly 平均对齐，不靠着容器壁，剩余空间平分

4. align-items

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

5. flex-flow

   flex-low: [flex-direction] [flex-wrap]
   就是 flex-direction 和 flex-wrap 的组合，简写，同上，这里不赘述.

6. align-content

   justify-conent，align-items，align-content 都极度相似.

   flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
   flex-end （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
   center (每一行)靠着cross线居中对齐//一般就是居中对齐
   space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
   space-around (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
   strentch (每一行)伸缩，占满整个高度