思考
多个盒子横向排列使用什么属性?
浮动
设置盒子间的间距使用什么属性?
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基本相同