如何使两个 div 平分左右？ 终极 CSS 指南

平分左右的布局：使用 Flexbox 的分步指南

导语

Flexbox 布局是创建现代化、响应式布局的强大工具。在本教程中，我们将深入了解如何使用 Flexbox 将两个 div 平分左右，同时探讨 justify-content 和 space-between 属性的强大功能。

了解 Flexbox

Flexbox 是一种 CSS 布局模型，允许元素灵活地排列在一个容器内。它使用一系列属性来控制项目的对齐、尺寸和顺序。

平分左右布局的步骤

1. 设置容器

首先，需要为要平分的 div 创建一个容器元素。在容器上设置以下样式：

.container {
  display: flex;  // 启用 Flexbox 布局
  flex-direction: row;  // 项目水平排列
}

2. 使用 justify-content: space-between

要将 div 平分左右，需要使用 justify-content 属性。将其设置为 space-between ：

.container {
  justify-content: space-between;  // 将项目推向两端
}

3. 添加 div

接下来，在容器内添加两个 div：

<div class="container">
  <div class="left">我是左边的 div</div>
  <div class="right">我是右边的 div</div>
</div>

4. 设置宽度

为了确保 div 平分，需要设置它们的宽度：

.left, .right {
  width: 50%;
}

深入了解 justify-content 和 space-between

justify-content 属性控制项目在主轴（本例中为水平方向）上的对齐方式。

space-between 值将项目推向容器的两端，使它们之间均匀分布。

space-between 的强大功能

space-between 不仅用于平分布局，还可以创建各种其他效果：

• 创建等宽列
• 平均分布导航栏中的项目
• 将按钮居中对齐

示例：响应式平分布局

为了创建一个响应式平分布局，可以在较窄的屏幕上将 div 堆叠在一起：

@media (max-width: 768px) {
  .container {
    flex-direction: column;  // 项目垂直排列
  }
}

结论

使用 Flexbox 将两个 div 平分左右既简单又高效。通过设置正确的 display 、flex-direction 和 justify-content 属性，可以轻松创建平衡且响应式的布局。

常见问题解答

1. Flexbox 只能用于平分左右吗？

不，Flexbox 可用于创建各种复杂的布局，包括垂直对齐、弹性项目和自动换行。

2. space-between 和 space-around 有什么区别？

space-between 将项目推向两端，使它们之间的间距最大。space-around 在项目周围创建相等的间距，包括开头和结尾。

3. Flexbox 可以在所有浏览器中使用吗？

是的，Flexbox 得到所有现代浏览器的广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。

4. 为什么我的 div 没有平分？

确保设置了正确的 display 、flex-direction 和 justify-content 属性，并且 div 的宽度相等。

5. 如何让 div 在容器内垂直居中？

可以结合 justify-content: center 和 align-items: center 属性在垂直方向上居中项目。