目标: 能够使用Flex布局模型灵活、快速的开发网页(对低版本浏览器不支持)
Flex布局/弹性布局:
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
作用 :
- 基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式 :
父元素添加 display: flex,子元素可以自动的挤压或拉伸
组成部分 :
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴 / 交叉轴
.box {
/* 视觉效果: 子级一行排列/水平排列 */
/* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
display: flex;
height: 200px;
border: 1px solid #000;
}
主轴对齐方式
目标:使用justify-content调节元素在主轴的对齐方式
在Flex布局模型中,调节主轴或侧轴的对齐方式来设置盒子之间的间距
侧轴对齐方式
目标:使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性:
- align-items(添加到弹性容器)
- align-self: 控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
伸缩比
目标:使用flex属性修改弹性盒子伸缩比
属性
- flex : 值;
取值分类
- 数值(整数)
注意 : 只占用父盒子剩余尺寸
主轴方向
目标:使用flex-direction改变元素排列方向
思考:Flex布局模型中,弹性盒子默认沿着哪个方向排列?
答:水平方向。
思考:如何实现内容垂直排列?
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
justify-content:center和align-items:center;
.box li {
display: flex;
/* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
/* 修改主轴方向: 列 此时主轴为垂直方向,通俗来说变成了侧轴,所以要实现
水平居中就要用align-items: center;垂直居中要用justify-content: center;*/
flex-direction: column;
/* 视觉效果: 实现盒子水平居中 */
align-items: center;
/* 视觉效果: 垂直居中 */
justify-content: center;
width: 80px;
height: 80px;
border: 1px solid #ccc;
}
弹性盒子换行
目标:使用flex-wrap实现弹性盒子多行排列效果
思考:默认情况下,多个弹性盒子如何显示?
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 :align-content
取值与justify-content基本相同(没有space-evenly)