弹性盒子布局：语法

Posted 2020-09-11

块级元素转换成弹性盒子：{display：flex}

行内元素转换成弹性盒子：{display：inline-flex}

1.flex-direction：用来确认主轴的方向

　　row（从左向右）相对于row-reverse（从右向左）
　　column（从上向下）相对于column-reverse（从下向上）

2.flex-wrap：作用于子元素换不换行

　　nowrap（不换行） wrap（换行，从上往下走）wrap-recerse(换行，从上往下走)

3.justify-content：定义子元素在主轴上对齐的方式

　　flex-start（左对齐）flex-end（右对齐）center（居中）space-between(两端对齐)space-around（均分对齐）

4.align-items：交叉轴（Y轴）对齐方式

　　flex-start（交叉轴的起点对齐）flex-end（交叉轴的终点对齐）center（居中）baseline（文字基线对齐）

5.align-content：定义多根轴线的对齐方式

　　flex-start（起点对齐）flex-end（终点对齐）center（中点对齐）space-between(两端对齐)space-around（每根轴线的两端对齐）