弹性布局小结

之前接触的布局方式：流式布局 浮动布局  定位布局
弹性布局（flex布局）：flexbox  弹性盒模型
优势：自动分配空间  不需要计算
劣势：父盒子需要设置高度
1.开启弹性布局 在父盒子中添加 display：flex；
2.主轴的排列方向
flex-direction 
分为横向和纵向模式
row 行模式  正向排列  默认    row-reverse 行模式 反向
column  列模式  正向排列 
column-reverse  列模式  反向排列 
主轴可以是横轴也可以是纵轴 主轴和交叉轴是相对的 
容器和项目 
父盒子叫做容器 给父盒子开启弹性布局
子盒子就叫做项目 会将行内元素块状化
主轴中项目的对齐方式 
起点对齐（默认） 
justify-content: flex-start;
终点对齐
justify-content: end;
中点对齐 
justify-content: center;
两端对齐 
justify-content: space-between; 
平均分配 
justify-content: space-around;
完全对齐方式
justify-content: space-evenly; 
项目的换行
默认不换行 
flex-wrap: nowrap;
换行 当容器的宽度小于项目的宽度 会出现换行
 设置主轴排列和项目是否换行的综合写法
flex-flow: (主轴排列)row  （项目换行）wrap;
flex-wrap: wrap;
反向换行 -->
flex-wrap: wrap-reverse; -->
交叉轴的对齐方式  注意事项：只有一行
起点对齐
align-items: flex-start;
中心对齐 
align-items: center; 
终点对齐
align-items: flex-end;
justify-content: center;
项目的排列顺序
order 默认为0  可以是负数  数字越小 排序越靠前
项目的增长规则
align-content  交叉轴有多行的对齐方式 
起点对齐 
align-items: flex-start;
中心对齐 
align-items: center;
终点对齐 
align-items: flex-end;
justify-content: center;
flex-grow: 用于对剩余空间的分配 
默认为0 不会分配 
如果为1 有剩余空间的时候 会自动放大 占全部剩余空间
每个项目都有这个属性，则表示要分配剩余空间的比例
项目的收缩规则 
flex-shrink  项目在容器中的收缩规则  只有项目总的宽度超过容器才会使用这个属性
默认为1      值为0 当容器空间不足时  项目不会收缩  值为n  当空间容器不足时  项目收缩的比例
项目的初始尺寸 
flex-basis 
项目在主轴上的初始尺寸 一旦这个属性设置以后 原来宽度或高度就会失效 
主轴在水平方向 宽度会失效
主轴在垂直方向  高度会失效