Flex Two Columns 使用 Flexbox 实现极其简单的行和列布局，使用 CSS 实现超级简单的响应式行和列

2025-05-24

Flex Two Columns使用 Flexbox 轻松实现行和列布局

超级简单的响应式行和列，直接使用 CSS

超级简单的响应式行和列，直接使用 CSS

网格布局是网页开发设计中不可或缺的一部分，你很可能已经尝试过 Bootstrap 或 Foundation 之类的框架来实现你的布局。但是，和大多数人一样，我并不喜欢运行 Bootstrap 或 Foundation 所需的依赖项，也不喜欢它对页面加载时间的影响。

事实上，当我使用 Bootstrap 编写应用程序时，我几乎只将它用于网格布局，有时我会将它用于通知或基本相当合理的 CSS 默认值，但 90％ 的时间，我想要的只是网格布局。

我也不喜欢只提供 12 列或更少的分列选项。感觉有时候你得费些周折才能把列拆分成列，或者做些其他奇怪的事情。

如何才能更快更轻松地实现网格布局？Flexbox 就是答案。我认为

弹性盒子

目前，弹性盒子几乎无处不在。所有主流浏览器都支持它。它允许更简单的布局，并且 React-Native 也支持它，这意味着当我为 React-Native 布局页面时，我首先会使用弹性盒子，但我发现自己在 Web 开发中也会首先使用弹性盒子。

事实上，我上一个布局的应用完全是用弹性盒子做的。我发现它真的很容易用。

如果你对弹性盒不太了解，我推荐这个页面，它对弹性盒进行了很好的概述。

布局

首先我将整个页面包裹在一个 div 中。

<div class='some-page-wrapper'>
</div>
Enter fullscreen mode Exit fullscreen mode

然后我定义一个可以帮助布局的类.row。.column

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

现在如果我们想要一个两列布局：

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS 看起来像这样：

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

如果我们想添加第三列怎么办？HTML 代码可以轻松更新为：

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

这样我们就添加了第三列。它无缝地嵌套在我们的行中。

现在如果我们想要更复杂的布局怎么办？

我们可以添加更多行，这很容易。

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column Two
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Three
      </div>
    </div>
  </div>
  <div class='row 2'>
    <div class='column'>
      <div class='green-column'>
        Some Text in Row 2, Column One
      </div>
    </div>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Row 2, Column Two
      </div>
    </div>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Row2, Column Three
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

或者我们可以调整列的大小。

要使用双列，我们可以添加一个.double-column类。不过，这适用于任何大小的列，例如 60/40，10/10/10/10/10/10/10/10/10/10，实际上，任何组合都可以。例如，1 x 100，或者 10 x 1，然后 20 x 3，最后 30 x 1。选项无穷无尽！

在一个布局中，我在“列”周围添加了较大的边距，由于行会向下换行，所以我的一行包含所需的“列”数。列是固定宽度的卡片，因此它们会换行到下一行，而弹性盒子会巧妙地响应式地将卡片沿屏幕向下换行。

.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
}
Enter fullscreen mode Exit fullscreen mode

但这响应性不是很好吗？我们可以使用媒体查询来增加一些响应性。

只需将flex: 1和移动flex: 2到媒体查询中（大小取决于应用程序，我只是提供一个选项）

@media screen and (min-width: 800px) {
  .column {
    flex: 1
  }

  .double-column {
    flex: 2
  }
}
Enter fullscreen mode Exit fullscreen mode

在> 800px处：

响应速度大于 800

在 < 800px 处：

响应小于 800

最终的codepen，提示点击右下角的1x或者0.5x按钮，看看“响应式”布局的区别。

本质上，我们用 20 行 CSS 就彻底颠覆了 Bootstrap 的行/列布局。我们能够快速创建行/列布局，而且由于使用了 Flexbox，我们几乎不用担心布局崩溃或出现任何问题。Flexbox 易于适应各种用途，并支持高度可定制性。你觉得 Flexbox 怎么样？你尝试过吗？

另一个隐藏的好处是，如果我以这种方式布局 React 组件，那么布局 React-Native 组件就非常容易，看起来很相似。

我通常在我的项目中使用 SCSS，因此如果您发现一些不完美的 CSS，请告诉我！

文章来源：https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01
Devto 翻译
PREV
11 个 React 示例
NEXT
我们帮助 42 位开发人员获得加薪和晋升，共计 772,441 美元，以下是我们的收获