CSS 在桌面和移动设备上编写2列和3列flexbox代码（换行）

阅读更多：CSS 教程

在本文中，我们将介绍如何使用CSS编写适用于桌面和移动设备的2列和3列flexbox布局代码（换行）。

在现代的Web开发中，响应式设计已成为一个重要的考虑因素。为了确保我们的网站在不同的设备上显示良好，并提供良好的用户体验，我们可以使用CSS的flexbox布局来实现跨设备的自适应布局。

在桌面上创建2列布局

首先，我们将看到如何在桌面上创建一个2列的布局。我们可以使用以下CSS代码：

.container {
  display: flex;
  justify-content: space-between;
}

.column {
  flex-basis: calc(50% - 10px);
}

这里，我们使用了一个包含两列的父容器。通过将其display属性设置为flex，我们可以使其成为一个flex容器。通过将justify-content属性设置为space-between，我们可以将两列均匀地分开。

同时，我们使用了.column类来定义列的样式。通过使用flex-basis属性，我们可以定义每一列的初始宽度。在这个例子中，我们将每一列的宽度设置为50%减去10像素。

在移动设备上创建2列布局

接下来，我们将看到如何在移动设备上创建一个2列的布局。我们可以使用以下CSS代码：

@media (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }

  .column {
    flex-basis: calc(100% - 10px);
  }
}

在这里，我们使用了@media查询来检测设备的宽度是否小于等于600像素。如果是的话，我们将应用内部的CSS样式。

在移动设备上，我们将使用flex-wrap属性来允许容器的子元素换行。这样，两列就会变为一列。同时，我们将每一列的宽度设置为100%减去10像素，以确保在移动设备上有足够的空间。

在桌面上创建3列布局

现在，让我们看看如何在桌面上创建一个3列的布局。我们可以使用以下CSS代码：

.container {
  display: flex;
  justify-content: space-between;
}

.column {
  flex-basis: calc(33.33% - 10px);
}

这里的代码与创建2列布局的代码非常相似。唯一的区别是我们将列的数量增加到了3列。

在移动设备上创建3列布局

最后，让我们看看如何在移动设备上创建一个3列的布局。我们可以使用以下CSS代码：

@media (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }

  .column {
    flex-basis: calc(100% - 10px);
  }
}

与创建2列布局的移动设备代码相同，我们使用@media查询来检测设备的宽度是否小于等于600像素，并应用内部的CSS样式。

在移动设备上，我们将容器的子元素换行，并将每一列的宽度设置为100%减去10像素。

总结

通过使用上述的CSS代码，我们可以在桌面和移动设备上创建2列和3列的flexbox布局。通过灵活运用CSS的flexbox属性和@media查询，我们可以实现在不同设备上的自适应布局。这种响应式设计方法可以帮助我们提供更好的用户体验，并确保我们的网站在各种设备上都能够正常显示。希望本文能对你在编写flexbox布局代码时有所帮助！