Flex知识

1. flex-direction：（决定xy轴）

row  ，  row-reverse ，  column ，  column-reserve

2. justify-content：（子元素排列）

flex-start （左到右）  flex-end（右到左）

center （居中）

space-around（平分剩余空间）

space-between（先贴左右两边，中间平分空间）

3. flex-wrap：（设置是否换行）（flex布局默认不换行，强行挤压在同一行）

4. align-items：（侧轴上子元素排列）单行

flex-start（上到下）   flex-end（下到上）

center（垂直居中）   stretch（拉伸）

5. align-content：（侧轴上子元素排列）多行

flex-start （左到右）  flex-end（右到左）

center （居中）

space-around（平分剩余空间）

space-between（先贴左右两边，中间平分空间）

左右固定 中间flex1    双飞翼布局