Flex 布局笔记 （参考阮一峰网络日志）

flex 布局
有6个属性 设置在容器上
1.flex-direction:row|row-reverse|column|column-reverse //项目的排列方向 row 从左往右，column 从上往下
2.flex-wrap:nowrap | wrap | wrap-reverse //wrap-reverse 换行后 第一行在下面
3.flex-flow: row nowrap //flex-direction 和flex-wrap 的简写 默认是row nowrap
4.justufy-conrtent: flex-start|flex-end|center|space-between|space-around //项目在主轴上的（水平方向）的对齐方式 假设主轴为从左到右 属性值分别是：左对齐|右对齐|居中| 两端对齐，项目之间间隔相等|每个项目的间隔相等，项目之间的间隔比项目到边框的间隔大一倍
5.align-items:flex-start | flex-end | center | baseline | stretch;//项目在交叉轴（垂直方向上）对其方式 stretch:如果项目未设置高度或设为auto，将占满整个容器的高度 baseline: 项目的第一行文字的基线对齐;
6.align-content :flex-start | flex-end | center | space-between | space-around | stretch //定义多根轴线的对齐方式 如果项目只有一根轴线，该属性不起作用
6个属性设置在项目上
1. order : <integer>; //定义项目的排列顺序，数值越小，排列越靠前 默认为 0 ；
2.flex-grow: <number>; // 定义项目的放大比例 默认 0 不放大
3.flex-shrink :<number> // 定义项目的缩小比例 默认 1 如果空间不足 则缩小 ；
4.flex-basis : XXpx|auto //定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
5.flex:none|auto //该属性是 flex-grow,flex-shrink,flex-basis的简写，默认值是 0 1 auto,有两个快捷键 auto（1 1 auto），none(0 0 auto).
6.align-self:auto | flex-start | flex-end | center | baseline | stretch; //允许单个项目与其他项目不同的对齐方式 默认是auto，继承父元素 align-items的属性，如果没有父元素，则等同于stretch