CSS 当flex项换行时，仅设置margin-top

在本文中，我们将介绍如何使用CSS在flex布局中仅当flex项换行时设置margin-top。

阅读更多：CSS 教程

什么是flex布局？

Flex布局是一种现代的CSS布局方式，通过将容器分割为flex项来创建灵活的网格系统。它可以自动调整flex项的大小和位置以适应不同的屏幕尺寸和设备。

为什么要在flex项换行时设置margin-top？

有时候我们希望在flex布局中的特定情况下，仅当flex项换行时设置margin-top。换行后的flex项和未换行的flex项之间可能需要一些间距，以便视觉上更好地组织和展示内容。

使用媒体查询和flex-wrap属性设置margin-top

为了在适当的时候设置margin-top，我们可以使用媒体查询和flex-wrap属性来控制flex项的换行情况。

首先，我们需要在CSS中定义一个媒体查询，以便只有在特定的屏幕宽度下应用样式。例如，我们可以使用以下媒体查询将样式应用于屏幕宽度小于600px的情况：

@media (max-width: 600px) {
  /* 在此处设置margin-top样式 */
}

接下来，我们需要使用flex布局容器的flex-wrap属性来控制flex项的换行。将flex-wrap属性设置为wrap，可以确保当容器的宽度不足以容纳所有的flex项时，它们会自动换行。

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

当flex项换行时，我们可以通过在媒体查询中使用相关的选择器来设置margin-top样式。

@media (max-width: 600px) {
  .flex-container .flex-item {
    margin-top: 20px;
  }
}

在上面的示例中，我们在flex项（class为.flex-item）换行时为其设置了20px的margin-top。

下面是一个完整的示例：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

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

.flex-item {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
}

@media (max-width: 600px) {
  .flex-container .flex-item {
    margin-top: 20px;
  }
}

在上面的示例中，当屏幕宽度小于600px时，flex项会自动换行，并且在每个换行的flex项上方设置了20px的margin-top。