弹性布局

弹性布局

容器：父元素

项目：子元素

主轴：X轴（默认）

交叉轴：Y轴（默认）

添加flex的标签就是容器，子元素就是项目

并且display不具有继承性

功能：

1、所有的项目（子元素）默认情况在一行显示。

2、如果所有项目（子元素）宽度之和大于容器的宽度。项目会自动缩小，即不会超出容器的尺寸（不会换行）

容器样式的添加

flex-direction改变主轴的方向

row（行） 默认值 X轴（flex-start主轴起始位置改为左侧）

column(列) Y轴（flex-start交叉轴起始位置改为左侧）

row-reverse X轴（flex-start主轴起始位置改为右侧）

column-reverse Y轴（flex-start交叉轴起始位置改为下侧）

flex-wrap设置换行

nowrap不换行

wrap换行

注：当项目的尺寸大于容器的尺寸才会换行

wrap-reverse 起始位置改为底部（主轴是X轴）

flex-flow：row（主轴方向） wrap（是否换行）

是主轴方向和换行的缩写方式

弹性布局主轴对齐方式

justify-content

当主轴方向是row的时候

flex-start（默认值） 左对齐

flex-end 右对齐

justify-content：center 水平居中

当主轴方向是column的时候

flex-start（默认值） 顶端对齐

flex-end 底部对齐

justify-content：center 垂直居中

两端对齐**

space-around 分散对齐

step1、剩余空间=容器尺寸-所有项目尺寸之和

step2、剩余空间/项目个数的结果

step3、step2结果/2

step4、把step3的结果给到每个项目的左右

space-evenly 平均分配