这可以通过弹性盒或网格来实现吗？答案

【问题标题】：Can this be achieved with a flexbox or grid?这可以通过弹性盒或网格来实现吗？
【发布时间】：2022-01-28 16:23:31
【问题描述】：

我正在尝试使用 flexbox 并且不使用媒体查询来实现此效果。我可以用网格获得这种效果吗？

台式机 -> 平板电脑 -> 移动设备：

【问题讨论】：

flexbox 好吗？如果我创建一个...
@Sarout 确定 ;)
我不能，我认为它在网格中很简单，但 IDK 网格，对不起
当试图弄乱 CSS flex 或 CSS 渐变之类的东西时，请查找“生成器”。这是一个很好的 flexbox 生成器：the-echoplex.net/flexyboxes
有一个更好的生成器，但选择更少，在开发工具中你可以直接将它编辑到你的站点中 + flex 生成器不能做这样的事情

【解决方案1】：

当然，您可以使用 flexbox 实现类似的效果。我相信最简单的方法是为所有三个块设置一个主容器，并为前两个移动块设置一个子容器。这是一个工作示例：

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

.container {
  width: 100%;
}

.subcontainer {
  width: 50%;
  min-width: 125px;
}

#block1, #block2, #block3 {
    margin-bottom: 50px;
    width: 100px;
    height: 100px;
}
#block1 {
  background-color: peru;
  margin-right: 25px;
}

#block2 {
  background-color: darkorange;
  margin-right: -50px;
}

#block3 {
  background-color: orange;
  height: unset;
  min-height: 100px;
  display: flex;
  align-items: stretch;
}

<div class="container">
  <div class="subcontainer">
    <div id="block1"></div>
    <div id="block2"></div>
  </div>
  <div id="block3"></div>
</div>

【讨论】：

很酷，我试着做一些类似的事情，但我不知道那些 błocka 宽度

【解决方案2】：

这是另一种解决方案，使用 flexbox、grid 和 @media 查询。在第一张和第三张图片上更容易使用flexbox，因为它们有一个维度/方向。对于第二张图片，使用grid 更容易，因为它更像是一个 2D 布局，需要您注意元素的水平和垂直才能正确设置。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: space-evenly;
  height: 80vh;
  margin: 3rem;
}

.container>div {
  border: 1px solid black;
  display: grid;
  width: 10rem;
  place-content: center;
}

@media screen and (max-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
  }
  .b {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .c {
    grid-column: 2/3;
    grid-row: span 2;
  }
}

@media screen and (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .container>div {
    flex: 1;
  }
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

【讨论】：