### CSS
弹性盒子布局（
Flexbox）使用方法及示例
#### 什么是
Flexbox？
Flexbox 是一种用于在一维空间中高效地对齐和分布项目的
布局模式。它允许容器内的项目动态调整大小，从而更好地适应不同屏幕尺寸和设备需求[^2]。
#### 基本结构
Flexbox 主要由两个部分组成：**容器（Container）** 和 **项目（Item）**。通过设置 `display:
flex` 或 `display: inline-
flex`，可以让某个元素成为
Flex 容器，其子元素则会自动变为
Flex 项目[^3]。
---
#### 核心属性
以下是
Flexbox 中最常用的几个核心属性：
1. **`display`**
- 设置为 `
flex` 可以启用
Flexbox 布局。
```css
.container {
display:
flex; /* 启用
Flexbox */
}
```
2. **`
flex-direction`**
- 控制主轴的
方向，默认值为 `row`（水平从左到右）。其他可能的值包括 `column`、`row-reverse` 和 `column-reverse`。
```css
.container {
flex-direction: column; /* 改变为主轴垂直
方向 */
}
```
3. **`justify-content`**
- 决定项目在主轴上的对齐方式，常见的值有 `
flex-start`、`center`、`space-between` 等。
```css
.container {
justify-content: center; /* 水平居中 */
}
```
4. **`align-items`**
- 决定项目在交叉轴上的对齐方式，常见值有 `stretch`、`center`、`baseline` 等。
```css
.container {
align-items: center; /* 垂直居中 */
}
```
5. **`
flex-wrap`**
- 当项目超出容器宽度时决定是否换行，默认值为 `nowrap`，可设为 `wrap` 来支持多行显示。
```css
.container {
flex-wrap: wrap; /* 超出时换行 */
}
```
6. **`order`**
- 修改项目的排列顺序，数值越小优先级越高。
```css
.item {
order: 2; /* 将该项目放在第二个位置 */
}
```
7. **`
flex`**
- 组合了三个属性：`
flex-grow`, `
flex-shrink`, 和 `
flex-basis`，用来定义项目如何扩展或收缩。
```css
.item {
flex: 1; /* 占满剩余空间 */
}
```
---
#### 实现示例
##### 示例 1：简单的水平居中
布局
```
html
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
<style>
.container {
display:
flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.item {
width:
50px;
height:
50px;
background-color: lightblue;
margin:
5px;
}
</style>
```
##### 示例 2：按比例分配空间
```
html
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
</div>
<style>
.container {
display:
flex;
}
.item {
border: 1px solid black;
padding: 10px;
}
.one {
flex: 1; } /* 占总宽的 1/6 */
.two {
flex: 2; } /* 占总宽的 2/6 */
.three {
flex: 3; } /* 占总宽的 3/6 */
</style>
```
##### 示例 3：响应式
布局
```
html
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
</div>
<style>
.container {
display:
flex;
flex-wrap: wrap; /* 自动换行 */
}
@media (max-width: 600px) {
.item {
flex: 1 1 100%; /* 在小屏幕上占满整行 */
}
}
.item {
background-color: coral;
color: white;
text-align: center;
padding: 20px;
margin:
5px;
}
</style>
```
---
#### 最佳实践建议
1. 使用 `
flex` 属性简化多个子项的空间分配逻辑[^4]。
2. 配合媒体查询优化移动设备体验。
3. 对于复杂
布局场景，考虑结合 Grid Layout 进一步增强灵活性[^4]。
---
扫一扫
1760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
