flex弹性布局

一、弹性布局是什么
flex布局即弹性布局，主要代替传统float浮动布局，解决排版和对齐方式等问题，其优势是做一维布局（网格布局是二维布局）。

二.flex布局的用法
布局要给父元素设置，子元素按照布局方式排列，他会使块级元素不独占一行
① 设置在父容器上的内容

• display：flex; 【必须存在，才能进行弹性布局】

• flex-direction：row;【主轴排列方向】
  row;默认值，显示为行，方向与当前文档水平流方向一致，默认从左往右
  row-reverse；行，与默认相反，从右往左
  column;显示为列，从上往下
  column-reverse；列，与默认相反，从下往上

• flex-wrap：nowrap;【是否进行换行处理】
  nowrap;默认值，不换行处理
  wrap；换行处理
  wrap-reverse；反向换行处理

• flex-flow：flex-direction flex-wrap;【复合写法】

• justify-content：【属性决定了主轴方向上子项的对齐和分布方式】 flex-start；子项都去起始位置对齐
  flex-end；子项都去结束位置对齐 center；子项都去中心位置对齐
  space-between；中间，表现为两端对齐，从起始位置到结束位置，多余的空白间距只在元素中间区域分配
  space-around；环绕，每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉效果是边缘两侧的空白间距只有中间空白间距的一半
  space-evenly；匀称平等，每个flex子项的两侧空白间距完全相等

• align-items：【flex子项们相对于父容器在侧轴方向上的对齐方式】items指的是子项们，每一行中的子元素的上下对齐方式
  flex-start/center/flex-end;

• align-content:【多行的侧轴的对齐方式】
  （最少需要两行才能看出效果，因为它是多行的一个上下对齐方式）
  默认值是stretch拉伸，多行下，有几行就会把容器化分为几部分 属性值与justify-content的取值一样

②添加在子项子容器上的属性

• order:1/2/3/…;【排序】值越大越考后排

• flex-grow：0/.5/1/3…；【扩展】想看到扩展就必须有空白间距
  0；默认值，不去扩展
  1；去扩展，会把空白间距占满
  子元素会按照设置的比例值对空白间距进行分配
  如果比例值的总和小于1，那么空白间距还是存在(因为没被分配用完)
  如果比例值的总和大于1，那么就没有空隙，全被占满

• flex-shrink：【收缩】 默认值是1 / 0表示不收缩 / .5收缩小一些 / 2收缩大一些 （大小是跟正常缩放1进行比较的）

• flex: flex-grow flex-shrink flex-basis【复合写法】
  flex：1； → flex: 1 1 0; 空间等值分配
  flex: 0; → flex: 0 1 0;

• align-self: 跟align-items操作很像，区别是这个只针对某一个子项

• 图释

• 

三.注意事项及特点
1.默认情况下，在弹性盒子中的子元素是左右排列的。
2.默认情况下（即以水平为主轴时），当宽高不写时，宽度由内容决定，高度由父容器决定。
3.当以垂直为主轴时，当宽高不写，高度由内容决定，宽度由父容器决定[同水平轴相反]。
4.当子项的总宽度大于父容器的时候，会自动收缩（弹性的优先级是大于自身的固定大小）。
5.当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
6. 弹性布局中用的频率比较多的语法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
7.弹性布局的优势是做一维布局，网格布局的优势是做二维布局。

四.案例
1.