许久未碰前端，今日发现把居然flex布局属性忘得差不多了，复习一下。
flex布局就是将flex item放置在flex container中，通过在container或item上添加属性来非常容易的改变布局。
容器属性
-
flex-direction—————决定主轴的排列方向，属性决定从哪边开始
- row ————————从main axis的左端开始排列
- row-reverse ————从main axis的右端开始排列
- column ——————从cross axis的上方排列
- column-reverse———从cross axis的下方排列
-
flex-wrap ————————所有item排在一条axis上，属性决定如何换行
- nowrap ——————不换行
- wrap ———————第一行在上方
- wrap-reverse ————第一行在下方
-
flex-flow———————flex-direction和flex-wrap和集合，属性用
||隔开 -
justify-content————在main axis上的对齐方式
- flex-start ——————左对齐
- flex-end ——————右对齐
- center ———————居中
- space-between ———两端对齐
- space-around ———分散对齐
-
align-items—————在cross axis上如何对齐
- flex-start ——————下方对齐
- flex-end ———————上方对齐
- center ————————中点对齐
- baseline ———————第一行文字的基线对齐
- stretch————————默认，布满整个容器高度
-
align-content——————多根轴的对齐方式
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：与交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
- stretch（默认值）：轴线占满整个交叉轴
项目属性
- order————————排列顺序
- flex-grow——————项目放大比例
- flex-shrink——————缩小比例
- flex-basis——————占据主轴空间
- flex————————flex-grow, flex-shrink 和 flex-basis的合集
- align-self——————允许单个项目有与其他项目不一样的对齐方式，优先级最高
