CSS Flex 添加第二行

在 CSS 中使用弹性盒子布局（Flexbox）可以轻松地添加第二行。弹性盒子布局是一种灵活的布局模式，在网格布局模式之前就出现了，现在已经成为使用最多的布局模式之一。

使用 flex-wrap 属性

添加第二行最简单的方法是使用 flex-wrap 属性。默认情况下，弹性盒子的子元素会在一行中排列，当空间不足时会缩小子元素。通过设置 flex-wrap 属性为 wrap，可以让子元素在不足空间时自动换行，从而实现添加第二行的效果。

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

以上代码将 .container 元素变成了一个弹性盒子容器，通过设置 flex-wrap: wrap，子元素将在不足空间时自动换行，并添加第二行。

使用媒体查询

如果你想更加精细地控制子元素的排列，可以使用媒体查询。媒体查询可用于在不同的设备尺寸下应用不同的 CSS 样式。

例如，你想在宽度为 768 像素以下的设备上，将子元素排列成两列。你可以使用以下样式：

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

.container > * {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .container > * {
    flex-basis: 50%;
  }
}

以上代码中，通过设置 flex-basis 属性为 100%，每个子元素将占据整个行。在 768 像素以上的设备中，子元素的 flex-basis 属性将被设置为 50%，一行显示两个子元素。

结论

使用弹性盒子布局（Flexbox）可以轻松地添加第二行。通过设置 flex-wrap 属性为 wrap，子元素将在不足空间时自动换行，并添加第二行。在需要更精细的排列时，可以使用媒体查询调整子元素的布局方式。