Flex box 根据屏幕分辨率对特定项目进行分组

Question

根据用户的屏幕分辨率，我想使用弹性框实现两种布局。问题是我似乎无法通过 flex 找到一种方法，而每个布局都没有不同的 html。

场景一：对于大于X的屏幕分辨率，我希望有这样的安排。

场景 2，对于较小的屏幕分辨率，我希望布局是这样的：

HTML 我的 html 看起来像

<div class="flex-container">
   <div class="flex-item1">Number 1</div>
   <div class="flex-item2>
      <p>Number 2/p>
      <div>Number 3</div>
   </div>
</div> --end container

CSS

   .flex-container {
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
   }
    .flex-item1 {
      width:35vw;
   }
    .flex-item2 {
       wdith:55vw;
   }

在第一种情况下，我将 2 和 3 组合在一个 div 中，以迫使它们相互堆叠，但这会迫使数字 3 在较大的显示器上保持在右侧。相反，我需要将项目编号 3 转到新行并在较小的显示器上占据该行的 100vw，如方案 2 所示。

我想到了两组 html div。一个项目 2 和 3 组合在同一个弹性盒子中，一个它们在自己单独的弹性盒子中，并使用 display:none/auto 来关闭和打开它们，但我想知道有更好的方法这样做？

Answer 1

我想知道是否有更好的方法来做到这一点？

是的，有，即CSS Grid。您尝试实现的布局可以使用 CSS 网格轻松实现，并且 CSS 网格比 flexbox 更适合这种布局。使用 CSS 网格还可以简化您的 HTML 结构。

以下代码 sn-p 显示了使用 CSS 网格的所需布局的示例。

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item1 {
  background: peachpuff;
  grid-row: 1 / span 2;
}

.item2 {
  background: magenta;
}

.item3 {
  background: blueviolet;
}

@media (max-width: 500px) {
  .item1 {
    grid-row: 1 / span 1;
  }
  .item3 {
    grid-column: 1 / span 2;
  }
}

<div class="container">
  <div class="item1">Number 1</div>
  <div class="item2">Number 2</div>
  <div class="item3">Number 3</div>
</div>

使用 CSS 网格的 grid-template-area 属性的替代方法。

.container {
  height: 100vh;
  display: grid;
  grid-template-areas: 'n1 n2' 'n1 n3';
}

.item1 {
  background: peachpuff;
  grid-area: n1;
}

.item2 {
  background: magenta;
  grid-area: n2;
}

.item3 {
  background: blueviolet;
  grid-area: n3;
}

@media (max-width: 500px) {
  .container {
    grid-template-areas: 'n1 n2' 'n3 n3';
  }
}

<div class="container">
  <div class="item1">Number 1</div>
  <div class="item2">Number 2</div>
  <div class="item3">Number 3</div>
</div>

Answer 2

您可以使用 flexbox 轻松完成此操作。只需将其设为您的 css 即可：

.flex-container {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}
.flex-item-1 {
    background: #7dc5ed;
    flex-basis: 100%;
}
.flex-item-2 {
    background: #bb6fad;
    flex-basis: 50%;
}
.flex-item-3 {
    background: #6560ab;
    flex-basis: 50%;
}
@media (min-width: 768px) {
    .flex-container {
        flex-flow: row wrap;
    }
    .flex-item-1 {
        flex-basis: 50%;
    }
    .flex-item-2 {
        flex-basis: 50%;
    }
    .flex-item-3 {
        flex-basis: 100%;
    }
}