flex布局（父容器属性）

一. 什么的flex？

flex是弹性盒子模型。可以自己适应不同大小的屏幕。
display：flex（可以加在任何元素中）

二. flex的特点

正常盒子：
宽由父容器决定，高由内容决定。
flex盒子：
高由父容器决定，宽由内容决定（水平方向是主轴）。
宽由父容器决定，高由内容决定。（垂直方向是主轴）。

三. flex属性

1.flex-direction: 控制布局方向 (父容器中添加)

属性有：

• row（默认）行（从左到右）
• row-reverse 行（从右向左）
• colum 垂直（从上到下）
• colum-reversr 垂直（从下到上）

2.flex-wrap： 控制折行（父容器中添加）

属性有：

• nowrap 不换行（默认）

• wrap 换行

• wrap-reverse 反向折行
  3.justify-content 主轴上子项的对齐和分布（父容器中添加）
  
  属性有：

• start 从开始对齐

• center 从中间对齐

• end 从结束对齐

• space-between 两端对齐

• space-around 围绕（两边距离是中间距离的二分之一）

• space-everly 平均

3.align-items每一行子项侧轴对齐方式（父容器）

属性有：

• stretch 拉伸（默认）
• start 从开始对齐
• center 从中间对齐
• end 从结束对齐

4.algin-content 侧轴上的对齐和分布（最少两行）（父容器）

属性有：

• stretch 拉伸（默认）
• start 从开始对齐
• center 从中间对齐
• end 从结束对齐
• space-between 两端对齐
• space-around 围绕（两边距离是中间距离的二分之一）
• space-everly 平均

逆战班