flex布局
约 1024 字大约 3 分钟
2025-06-23
标准流
注
指的是标签在页面中默认的排布规则 如块元素独占一行，行内元素一行显示多个
浮动了解
浮动特点
浮动后的盒子顶对齐
浮动后盒子模型脱离标准流
浮动后盒子具有行内块特点
floatOptionalleft/right
浮动
清除浮动
注
父级没有高度，子级无法撑开父级高度
方法1 额外标签法
CSS
.box{
width: 500px;
background-color: skyblue;
}
.eldest{
width: 200px;
height: 200px;
background-color: pink;
}
.second{
width: 200px;
height: 200px;
background-color: lightgreen;
}
.bottom{
background-color: blue;
}
.clear{
clear:both;
}HTML
<div class="box">
<div class="eldest"></div>
<div class="second"></div>
<div class="clear"></div>
</div>
<div class="bottom">
</div>方法2 单伪元素法
CSS
.box{
width: 500px;
background-color: skyblue;
}
.box::after{
content: "";
display: block;
clear:both;
}
.eldest{
width: 200px;
height: 200px;
background-color: pink;
}
.second{
width: 200px;
height: 200px;
background-color: lightgreen;
}
.bottom{
background-color: blue;
}HTML
<div class="box">
<div class="eldest"></div>
<div class="second"></div>
</div>
<div class="bottom">
</div>方法3 双伪元素法
CSS
.box{
width: 500px;
background-color: skyblue;
}
.clearfix:before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear:both;
}
.eldest{
width: 200px;
height: 200px;
background-color: pink;
}
.second{
width: 200px;
height: 200px;
background-color: lightgreen;
}
.bottom{
background-color: blue;
}HTML
<div class="box clearfix">
<div class="eldest"></div>
<div class="second"></div>
</div>
<div class="bottom">方法4 overflow
CSS
.box{
width: 500px;
overflow: hidden;
background-color: skyblue;
}
.eldest{
width: 200px;
height: 200px;
background-color: pink;
}
.second{
width: 200px;
height: 200px;
background-color: lightgreen;
}
.bottom{
background-color: blue;
}HTML
<div class="box">
<div class="eldest"></div>
<div class="second"></div>
</div>
<div class="bottom">
</div>浮动本质
重要
浮动本来是用于图文混排
Flex布局
注
flex布局是弹性布局/伸缩布局
flex布局不会产生脱标现象
CSS
.box{
display: flex;
width: 1000px;
height: 200px;
background-color: lightblue;
}
.box>div{
width: 300px;
height: 200px;
background-color: lightgreen;
}HTML
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>主轴对齐方式
注
justify-content
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
单行侧轴对齐方式
重要
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
| 属性值 | 效果 |
|---|---|
| scratch | 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸） |
| center | 弹性盒子沿侧轴居中排列 |
| flex- start | 弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
换行
提示
弹性盒子会自动挤压或拉伸，默认情况下，在一行显示
flex-wrapOptionalwrap/nowrap
换行
多行侧轴对齐方式
注
align-content，父级要设置高度
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
单独设置子盒子
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置)
修改主轴方向
注
flex-direction
| 属性值 | 效果 |
|---|---|
| row | 水平方向，从左向右（默认） |
| column | 垂直方向，从上向下 |
| row-reverse | 水平方向，从右向左 |
| column-reverse | 垂直方向，从下向上 |
伸缩比
.box{
display:flex;
}
.box .child{
flex:1; /* 表示占用父级剩余尺寸的份数 */
}更新日志
2025/6/26 22:42
查看所有更新日志