能否为桌面端与移动端配置不同的flexbox布局实现特定排列？

完全可以实现，用CSS Flexbox或者Grid都能轻松搞定，下面给你两种常用方案：

Flexbox 实现方案 #

HTML 结构 #

<div class="container">
  <div class="box box1">第一个div</div>
  <div class="box box2">第二个div</div>
  <div class="box box3">第三个div</div>
</div>

CSS 样式 #

/* 桌面端默认样式：三个div在同一行 */
.container {
  display: flex;
  gap: 10px; /* 可选，设置元素间的间距 */
  flex-wrap: wrap; /* 允许换行，为移动端布局做准备 */
}

.box {
  flex: 1; /* 让三个div平分容器宽度，可根据需求调整比例 */
  padding: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

/* 移动端适配（以屏幕宽度≤767px为例，可自行调整断点） */
@media (max-width: 767px) {
  .box2 {
    flex-basis: 100%; /* 强制第二个div独占一行 */
  }
}

Grid 实现方案 #

HTML结构和上面一致，CSS样式调整如下：

/* 桌面端默认样式：三等分布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.box {
  padding: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* 两等分布局 */
  }
  .box2 {
    grid-column: 1 / -1; /* 让第二个div横跨所有列，独占一行 */
  }
}

你可以根据实际设计需求，调整媒体查询的断点宽度、元素的内边距、背景色等样式，两种方案都能完美实现你要的布局效果。

内容的提问来源于stack exchange，提问作者webbmary