弹性布局

弹性布局

组成部分：

​ 容器：父元素

​ 项目：子元素

​ 主轴：X轴（默认）

​ 交叉轴：Y轴（默认）

• display不具备继承性

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

功能：

​ 1.所有子元素默认情况下在一行显示

​ 2.如果所有项目宽度之和大于容器宽度，项目会自动缩小。

​ 即不会超出容器尺寸（不会换行）

一、主轴

flex-direction：改变主轴的方向

1. row 行 X轴（flex-start 起始位置为左侧）

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

2. column 列 Y轴 （flex-start 起始位置为顶部）

column-reverse 列 Y轴 （flex-start 起始位置为底部）

设置换行flex-wrap
nowrap 不换行

wrap 换行

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

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

justify-content主轴的对其方式
当主轴方向是row

flex-st