今天整理一下日常开发里常用的弹性盒子（Flex Box）布局。很难想象我曾经一度执着于用float、text-align、vertical-align等属性来解决元素居中对齐的问题，显然，很多场景是无法满足的。（既然提到居中......有时间再整理一篇关于实现元素居中问题的文章）
一、Flex布局基础概念
Flex布局是CSS3的新特性，是日常开发最常用的一种布局方式，避免了float导致的布局塌陷、position: absolute脱离文档流的问题。 当页面需要适应不同屏幕大小以及设备类型时，Flex布局可以确保元素随之灵活变化。
1. 弹性容器（Flex container）与弹性项目（Flex item）
- 弹性容器：通过
display: flex 或 display: inline-flex 定义 - 弹性项目（弹性子元素）：容器的直接子元素自动成为弹性项目，弹性容器包含一个或多个弹性项目
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
width: 100%;
height: 350px;
background-color: rgb(200, 200, 200);
}
.flex-item {
background-color: #409eff;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
不使用 display: flex 的效果：
使用 display: flex 的效果：
2. 主轴（Main Axis）与交叉轴（Cross Axis）
二、容器属性详解
以下6个属性设置在容器上：
1. flex-direction：决定主轴方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
2. justify-content：主轴对齐方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
space-between：两端对齐，项目之间间隔相等space-around：项目两侧的间隔相等，首尾项目与容器边缘的间距是项目之间间距的一半space-evenly：项目之间间隔相等，首尾项目与容器边缘的间距也等于项目之间间距
3. align-items：交叉轴对齐方式
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch：默认值，如果项目未设置高度或设为auto，则拉伸至容器高度
4. flex-wrap：是否换行
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
5. align-content：多行项目的交叉轴对齐，如果只有一行则不生效
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- 生效条件：容器有多行项目（需设置
flex-wrap: wrap）
6. gap：项目间距
.container {
gap: 10px; /* 同时设置行与列间距 */
row-gap: 10px;
column-gap: 20px;
}
三、项目属性详解
以下6个属性设置在项目上：
1. order：项目排列顺序
.item {
order: 5; /* 默认0，数值越小越靠前 */
}
2. flex-grow：放大比例
.item {
flex-grow: 1; /* 默认0（就算有剩余空间也不放大） */
}
- 示例：如果三个项目同时设置
flex-grow: 1 则等分剩余空间
3. flex-shrink：缩小比例
.item {
flex-shrink: 1; /* 默认1（如果空间不足则缩小） */
}
4. flex-basis：初始尺寸
.item {
flex-basis: 200px | auto; /* 默认auto，项目本来的大小 */
}
5. flex：flex-grow, flex-shrink 和 flex-basis的简写
.item {
flex: auto | none | 1 | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; /* 默认0 1 auto */
}
6. align-self：单个项目交叉轴对齐
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
- 允许单个项目有与其他项目的对齐方式不一致，覆盖容器的
align-items 设置
四、实战代码示例
示例1：经典导航栏
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #c9c9c9;
}
.logo {
width: 100px;
}
.menu {
display: flex;
gap: 2rem;
}
</style>
</head>
<body>
<nav class="nav">
<div class="logo">Logo</div>
<div class="menu">
<div>Home</div>
<div>About</div>
<div>Contact</div>
</div>
</nav>
</body>
</html>
示例2：等高卡片布局
<style>
.card-container {
display: flex;
gap: 1rem;
}
.card {
flex: 1;
background: #f0f0f0;
padding: 1rem;
}
</style>
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2<br>多行内容</div>
<div class="card">Card 3</div>
</div>
示例3：垂直居中（经典问题）
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
看到这里就基本掌握了Flex布局。后面会考虑再整理一下关于另一个布局方式Grid的详解以及他们的区别。
阅读原文：点击查看原文
该文章在 2025/3/21 10:37:54 编辑过
400 186 1886
