CSS Grid/Flexbox实现8元素响应式动态布局方案咨询

Flexbox 实现方案 #

基础结构与移动端样式 #

所有元素放在单个容器中，移动端下默认单列排列：

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 可选：设置元素间距 */
}

.item {
  padding: 1rem;
  background-color: #eee; /* 示例样式 */
}

桌面端适配（≥768px） #

通过媒体查询切换为横向布局，利用弹性属性分配空间，并处理元素3隐藏后的自适应：

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* 第一行：元素1固定占50% */
  .item-1 {
    flex: 0 0 50%;
  }

  /* 元素2、3、4均分剩余50%空间 */
  .item-2, .item-3, .item-4 {
    flex: 1;
    min-width: 0; /* 解决内容溢出导致的布局异常 */
  }

  /* 元素3隐藏时，元素2占据原2+3的空间 */
  .container:has(.item-3.hidden) .item-2 {
    flex: 2;
  }
  .container:has(.item-3.hidden) .item-4 {
    flex: 1;
  }

  /* 第二行：元素5-8均分100%空间 */
  .item-5, .item-6, .item-7, .item-8 {
    flex: 0 0 25%;
  }
}

隐藏元素3时，只需给它添加hidden类即可触发布局调整。

CSS Grid 实现方案 #

Grid需要额外嵌套行容器来分离两行元素，结构相对复杂：

HTML结构 #

<div class="container">
  <div class="row row-1">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>
  <div class="row row-2">
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
  </div>
</div>

CSS样式 #

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.row {
  display: grid;
  gap: 1rem;
}

/* 移动端单列 */
.row-1, .row-2 {
  grid-template-columns: 1fr;
}

.item {
  padding: 1rem;
  background-color: #eee;
}

/* 桌面端适配 */
@media (min-width: 768px) {
  .row-1 {
    /* 总6列：元素1占3列（50%），元素2、3、4各占1列 */
    grid-template-columns: repeat(6, 1fr);
  }

  .item-1 {
    grid-column: span 3;
  }

  .item-2, .item-3, .item-4 {
    grid-column: span 1;
  }

  /* 元素3隐藏时，元素2占2列 */
  .row-1:has(.item-3.hidden) .item-2 {
    grid-column: span 2;
  }

  /* 第二行4元素均分 */
  .row-2 {
    grid-template-columns: repeat(4, 1fr);
  }
}

方案对比：哪种更简便？ #

Flexbox方案更简便，原因如下：

1. HTML结构更简洁：无需额外嵌套行容器，8个元素直接放在主容器中即可。
2. 逻辑更直观：利用弹性布局的flex属性天然适配空间分配，处理元素隐藏时仅需调整比例，无需修改网格跨度。
3. 代码量更少：无需拆分容器，媒体查询内的逻辑更紧凑，维护成本更低。

CSS Grid虽然能实现需求，但需要额外的结构嵌套和列数计算，处理动态元素时的调整逻辑更繁琐，不如Flexbox适配灵活。

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