flex基础详解

1. justify-content （主轴对齐方式）

flex-start(从左侧对排列齐)

flex-end（靠右侧对齐排列）

center(在中间对齐排列)

space-around(盒子间的间距是盒子与边界间距的2倍)

space-evenly(各处间距相等)

space-between(左右靠边，中间等间距排列)

2.align-items（交叉轴对齐方式）

flex-start(上对齐)

flex-end(下对齐)

center(居中对齐)

stretch(拉伸，不设置高度时自动拉伸)

baseline（基于文字基线对齐）

3.flex-direction决定主轴的方向

row(主轴为水平方向，起点在左端)

2. row-reverse（主轴为水平方向，起点在右端）

column（主轴为垂直方向，起点在上沿）

column-reverse(主轴为垂直方向，起点在下沿)

4.flex-wrap(如果一条轴线排不下，如何换行)

wrap(默认值)

no-wrap(不换行)

wrap-reverse（换行，第一行在下方）