1.百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
2.Flex布局
Flex布局/弹性布局：
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题
Flex布局组成
image.png
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
修改主轴对齐方式属性: justify-content
image.png
修改侧轴对齐方式属性:
Øalign-items（添加到弹性容器）
Ø align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
image.png
使用flex属性修改弹性盒子伸缩比
属性
Ø flex : 值;
取值分类
Ø 数值(整数)
注意 : 只占用父盒子剩余尺寸
使用flex-direction改变元素排列方向
image.png
使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
Ø 取值与justify-content基本相同
网友评论