Flex 每行 2 列 - HTML

Flexbox（弹性盒子）是一个用于在容器中创建灵活布局的 CSS 属性。在本文中，我们将学习如何使用 HTML 和 CSS 创建一个每行 2 列的 Flex 布局。

目标

我们的目标是创建一个具有两列的布局，其中每一行显示两个项目。每个项目都将占据容器的一半宽度，并具有相等的高度。

实现步骤

以下是实现这个目标的步骤：

1. 创建 HTML 结构
2. 使用 CSS Flex 属性设置布局

步骤 1 - 创建 HTML 结构

首先，我们需要创建一个包含两个项目的容器。HTML 结构如下：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

在这个例子中，我们有一个具有 class 名为 "container" 的 <div> 元素。其中包含了 6 个具有 class 名为 "item" 的 <div> 元素，分别表示我们的项目。

步骤 2 - 使用 CSS Flex 属性设置布局

接下来，我们使用 CSS Flex 属性来设置布局。在样式表中添加以下代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: calc(50% - 10px);
  height: 200px;
  margin: 5px;
}

在这里，我们将容器的 display 属性设置为 flex，这将使其成为一个 Flex 容器。我们还将容器的 flex-wrap 属性设置为 wrap，这将使项目在容器宽度不足时换行。

对于项目，我们使用 flex-basis 属性将它们的宽度设置为容器的一半减去间距大小。我们还设置了固定的高度和边距，以确保项目呈现出相同的外观。

结果

通过以上代码，我们成功创建了一个每行显示两个项目的 Flex 布局。每个项目都占据容器的一半宽度，并且具有相等的高度。

如果按照以上步骤设置了代码，你将得到一个类似下面的布局：

希望本文对你理解 Flex 布局以及如何实现每行两列布局有所帮助！

注意：请将示例中的图片链接替换为你自己的图片链接。