css弹性布局

弹性布局

弹性盒子

1.实现弹性布局的前提：

父元素设置display：flex

2.主轴方向：

（1）flex-direction:row (默认) 主轴为水平方向，起点在左端

（2）flex-direction:row-reverse 主轴为水平方向，七点在右端

（3）flex-direction:column 主轴为垂直方向，起点在下边

（4）flex-direction:column-reverse 主轴为垂直方向，起点在下边

3.是否换行：

（1）flex-wrap:nowrap (默认) 不换行

（2）flex-wrap:wrap 换行，第一行在上方

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

4.主轴对齐方式：

（1）justify-content:flex-start (默认值) 轴起点对齐

（2）justify-content:flex-end 轴终点对齐

（3）justify-content:center 居中

（4）justify-content:space-between 两端对齐，项目之间间隔相等

（5）jusify-content:space-around 每个元素两侧的间隔相等

5.交叉轴对齐方式：

（1）align-items:flex-start 轴起点对齐

（2）align-items:flex-end 轴终点对齐

（3）align-items:center 居中

（4）align-items:baseline 项目中第一行文字的基线对齐

6.align-content：

调整换行对齐方式

7.flex和flex-graw：

分配剩余空间或者设置子元素的比例