CSS flex布局：如何在第一行显示一个项目，而在下一行显示两个项目

在本文中，我们将介绍如何使用CSS flex布局在第一行显示一个项目，而在下一行显示两个项目。

阅读更多：CSS 教程

什么是CSS Flex布局

CSS Flex布局是一种用于网页布局的强大工具。它是CSS3中的一项新特性，在许多现代浏览器中得到了广泛支持。Flex布局通过将容器分割成一个个弹性盒子来实现网页的自适应布局。

如何使用CSS Flex布局

要在第一行显示一个项目，而在下一行显示两个项目，我们需要通过CSS的flex属性对容器进行设置。下面是一个示例：

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 30%;
  margin: 10px;
}

.item:first-child {
  flex-basis: 100%;
}

.item:nth-child(n+2) {
  flex-basis: 45%;
}
</style>

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
  <div class="item">项目4</div>
</div>

在上面的示例中，我们首先将容器设置为Flex布局，并通过设置flex-wrap: wrap允许项目在需要时换行。

然后，我们使用.item类来定义每个项目。为了实现在第一行显示一个项目，我们选择第一个项目并将其flex-basis属性设置为100%。这将使第一个项目占据整个一行。

接下来，我们通过使用:nth-child(n+2)选择器选择第二个及以后的项目，并将它们的flex-basis属性设置为45%。这将使它们占据两个项目的宽度，并在第一行下换行显示。

最后，我们使用flex: 1 1 30%为项目设置弹性属性。flex属性是flex-grow, flex-shrink和flex-basis属性的简写。这里我们将flex-grow和flex-shrink都设置为1，表示项目在同一行上有相同的伸缩比例，并将flex-basis设置为30%，表示项目的初始宽度为30%。

示例说明

让我们详细解释一下上面示例中的CSS代码：

首先，我们创建了一个名为.container的类，并将其设置为display: flex，以实现Flex布局。我们还将flex-wrap属性设置为wrap，以允许项目在需要时换行。

然后，我们创建了一个名为.item的类，并将其设置为flex: 1 1 30%。这个类将被应用到每个项目上。flex属性的三个值分别表示项目的伸缩比例、收缩比例和初始宽度。在我们的示例中，我们将flex-grow和flex-shrink都设置为1，表示项目在同一行上具有相同的伸缩比例，并将flex-basis设置为30%，表示项目的初始宽度为30%。

接下来，我们使用:first-child选择器选择第一个项目，并将其flex-basis属性设置为100%。这将使第一个项目占据整个一行。

最后，我们使用:nth-child(n+2)选择器选择从第二个项目开始的所有项目，并将它们的flex-basis属性设置为45%。这将使它们占据两个项目的宽度，并在第一行下换行显示。

通过这样的设置，我们可以在第一行显示一个项目，并在下一行显示两个项目，实现了我们的要求。