默认布局换行_弹性布局

容器：设置flex的元素（只对项目生效）

项目：容器的直接子元素

主轴：默认从左到右

侧轴：默认从上到下

容器属性

1.内容超出时项目是否可以正常换行

• flex-wrap：nowrap 不能换行
• flex-wrap：wrap 可以换行
• flex-wrap：wrap-reverse 可以换行 但换行后内容出现在原内容上边

2.设置主轴方向

• flex-direction：row水平方向从左到右
• flex-direction：column垂直方向从上到下
• flex-direction：row-reverse水平从右往左
• flex-direction：column-reverse垂直从下到上
• flex-flow：column nowrap direction和wrap的简写方式

3.内容排列方式

①主轴方向上的内容排列方式

• justify-content：center/flex-start/flex-end
• justify-content：space-between两边对齐
• justify-content：space-around围绕
• justify-content：space-evenly剩余空间平均分

②单行内容在交叉轴方向的排列方式

• align-items：stretch （stretch表示默认铺满）
• align-items：center 居中
• align-items：flex-start
• align-items：flex-end

③多行内容在交叉轴方向的排列方式

• align-content：flex-start
• align-content：center
• align-content：flex-end
• align-content：space-between
• align-content：space-around
• align-content：space-evenly

项目属性

作用于单个项目上，用于调节项目自身的排列

①order：控制元素在弹性布局中的排列位置（默认为0）

②algin-self：控制元素自身在交叉轴的排列方式

• algin-self：flex-start
• algin-self：flex-end 元素位于容器的结尾
• algin-self：center
• algin-self：baseline

③flex-grow：剩余空间的分配比例基数（默认0）

④flex-shrink：当空间不足需要压缩时，压缩的基数（默认1）

⑤flex-basis：在产生空间分配时，元素所占初始大小

⑥flex：（默认值：0 1 auto）Flex-grow flex-shrink flex-basis三个的简写