`
display: flex`
和 `
display: block` 是
CSS 中两种完全不同的布局模式，它们在元素排列、尺寸计算
和子元素控制上有本质区别。以下是详细对比
和示例说明：
---
### **1. 布局模型差异**
| 特性 | `
display: block` | `
display: flex` |
|---------------------|---------------------------------------|---------------------------------------|
| **布局流** | 垂直堆叠（块级元素独占一行） | 水平
或垂直排列（默认水平） |
| **子元素排列** | 按文档流顺序垂直排列 | 可通过 `
flex-direction` 自定义方向 |
| **尺寸计算** | 宽度默认 100%，高度由内容撑开 | 可通过 `
flex-grow`/`
flex-shrink` 分配空间 |
| **对齐控制** | 依赖 `margin`、`text-align` 等 | 通过 `justify-content`/`align-items` 精确控制 |
---
### **2. 核心区别详解**
#### **
(1
) 子元素排列方式**
- **`
block` 模式**
子元素垂直堆叠，每个子元素独占一行：
```html
<div style="
display: block; background
: lightblue;">
<div style="background
: coral;">
Block 1</div>
<div style="background
: gold;">
Block 2</div>
</div>
```
![
Block 布局效果]
(https
://via.placeholder.com/150x100/lightblue/000?text=
Block+Layout
)
- **`
flex` 模式**
子元素默认水平排列（可通过 `
flex-direction
: column` 改为垂直）：
```html
<div style="
display: flex; background
: lightgreen;">
<div style="background
: coral;">
Flex 1</div>
<div style="background
: gold;">
Flex 2</div>
</div>
```
![
Flex 布局效果]
(https
://via.placeholder.com/300x50/lightgreen/000?text=
Flex+Layout
)
#### **
(2
) 尺寸控制**
- **`
block` 元素**
宽度默认 100% 父容器，高度由内容决定：
```
css
.
block-box {
display: block;
width
: auto; /* 默认 100% */
height
: auto; /* 由内容撑开 */
}
```
- **`
flex` 子元素**
可通过 `
flex` 属性分配剩余空间：
```
css
.
flex-container {
display: flex;
}
.
flex-item {
flex: 1; /* 均分剩余空间 */
}
```
#### **
(3
) 对齐方式**
- **`
block` 模式**
依赖 `margin
: 0 auto` 水平居中，无垂直对齐控制：
```html
<div style="
display: block; text-align
: center;">
<div style="margin
: 0 auto; width
: 50%;">
Block Center</div>
</div>
```
- **`
flex` 模式**
通过 `justify-content`
和 `align-items` 精确控制：
```html
<div style="
display: flex; justify-content
: center; align-items
: center; height
: 200px;">
<div>
Flex Center</div>
</div>
```
---
### **3. 实际应用场景**
#### **
(1
) 何时用 `
block`？**
- 需要垂直堆叠元素（如段落、列表项）。
- 需要默认宽度撑满父容器（如导航栏、页脚）。
- 兼容旧浏览器（
Flexbox 在 IE10- 不支持）。
#### **
(2
) 何时用 `
flex`？**
- 需要水平排列元素（如按钮组、标签页）。
- 需要精确控制子元素的对齐
和空间分配。
- 响应式布局（通过 `
flex-wrap` 实现换行）。
---
### **4. 代码示例对比**
#### **
(1
) 按钮组布局**
- **`
block` 模式**（需手动控制宽度
和浮动）：
```html
<div style="font-size
: 0;"> <!-- 消除 inline 间隙 -->
<div style="
display: inline-
block; width
: 50%;">
<button style="width
: 100%;">Button 1</button>
</div>
<div style="
display: inline-
block; width
: 50%;">
<button style="width
: 100%;">Button 2</button>
</div>
</div>
```
- **`
flex` 模式**（简洁高效）：
```html
<div style="
display: flex;">
<button style="
flex: 1;">Button 1</button>
<button style="
flex: 1;">Button 2</button>
</div>
```
#### **
(2
) 垂直居中**
- **`
block` 模式**（需额外包装元素）：
```html
<div style="height
: 200px; text-align
: center;">
<div style="
display: inline-
block; margin-top
: 50%;">
Block Center
</div>
</div>
```
- **`
flex` 模式**（一行代码）：
```html
<div style="
display: flex; justify-content
: center; align-items
: center; height
: 200px;">
<div>
Flex Center</div>
</div>
```
---
### **5. 常见
问题解决**
#### **
问题1：
Flex 子元素不换行**
- **原因**：默认 `
flex-wrap
: nowrap`。
- **解决**：
```
css
.
flex-container {
display: flex;
flex-wrap
: wrap; /* 允许换行 */
}
```
#### **
问题2：
Block 元素水平居中失效**
- **原因**：未设置宽度
或 `text-align` 作用对象错误。
- **解决**：
```
css
.parent {
text-align
: center; /* 对 inline/inline-
block 生效 */
}
.child {
display: inline-
block; /*
或 block + margin
: 0 auto */
width
: 50%;
}
```
#### **
问题3：
Flex 布局中子元素被压缩**
- **原因**：未设置 `min-width
: 0` 覆盖默认最小宽度。
- **解决**：
```
css
.
flex-item {
flex: 1;
min-width
: 0; /* 允许内容溢出时压缩 */
}
```
---
### **6. 关键总结**
| 特性 | `
block` | `
flex` |
|---------------------|--------------------------------------|---------------------------------------|
| **排列方向** | 垂直 | 水平/垂直（通过 `
flex-direction`） |
| **尺寸控制** | 宽度默认 100% | 可通过 `
flex` 分配空间 |
| **对齐方式** | 依赖 `margin`/`text-align` | 通过 `justify-content`/`align-items` |
| **适用场景** | 传统文档流布局 | 复杂对齐
和空间分配 |
---
本文探讨了在使用display:flex布局时遇到的问题，即在JS中使用show和hide方法导致flex布局失效的情况。深入解析原因，并提供了解决方案：使用$('#div').css('display','flex')代替show()方法。
扫一扫
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
