弹性盒布局（flex布局）

思考

多个盒子横向排列使用什么属性？

​ 浮动

设置盒子间的间距使用什么属性？

​ margin

需要注意什么问题？

​ 浮动的盒子脱标

Flex布局/弹性布局：

Ø 是一种浏览器提倡的布局模型

Ø 布局网页更简单、灵活

Ø 避免浮动脱标的问题

设置方式

Ø 父元素添加 display: flex，子元素可以自动的挤压或拉伸

组成部分

Ø 弹性容器

Ø 弹性盒子

Ø 主轴

Ø 侧轴 / 交叉轴

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式

Ø 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

Ø align-items（添加到弹性容器）-父级容器
Ø align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

伸缩比

目标：使用flex属性修改弹性盒子伸缩比

l 属性

Ø flex : 值;

l 取值分类

Ø 数值(整数)

注意 : 只占用父盒子剩余尺寸

主轴方向

目标：使用flex-direction改变元素排列方向

l 思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？

l 答：水平方向。

l 思考：如何实现内容垂直排列？

弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

l 思考：默认情况下，多个弹性盒子如何显示？

l 弹性盒子换行显示 : flex-wrap: wrap;

l 调整行对齐方式 ：align-content

Ø 取值与justify-content基本相同