有没有办法用 calc 实现我的 Flexbox 布局？

Question

我正在尝试使用 Flexbox（不是 Grid！）排列我的容器，使其看起来像这张图片

使用以下 HTML：

<div class="container">
    <div class="sub-container">
        <div class="top-sub-container">
            <div class="box box-1">
                <img src="yourChoice.png" />
                <div class="box-text">
                    This is the text of the box 1
                </div>
            </div>
            <div class="box box-2">
                <img src="yourChoice.png" />
                <div class="box-text">
                    This is the text of the box 2
                </div>
            </div>
        </div>
        <div class="box box-3">
            <img src="yourChoice.png" />
            <div class="box-text">
                This is the text of the box 3
            </div>
        </div>
    </div>
    <div class="box box-4">
        <img src="yourChoice.png" />
        <div class="box-text">
            This is the text of the box 4
        </div>
    </div>
</div>

还有这个 CSS：

.container {
  display: flex;
  gap: 1rem; 
  height: 25rem;
  width: 25rem;
  padding: 1rem;
  background: pink;
}

.top-sub-container {
  flex: 1 1 auto;
  display: flex;
  gap: 1rem;
}

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

.box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border: 1px solid black;
}

但是，我的媒体查询卡住了，让这个设计具有响应性。是因为我没有使用 calc 在容器中平均划分我的弹性项目吗？还是calc跟这个问题没有关系？

如果 calc 无关紧要，如何使此布局适合最大宽度为 800 像素的媒体查询？当我使用开发工具在不同的屏幕尺寸上进行测试时，差距很大。

我正在尝试通过创建不同的媒体查询结果来解决它，但现在我想知道是否应该创建最大数量的媒体查询。

非常感谢您的建议。

Answer 1

您不需要很多容器，一个父 div 应该足以容纳“.box”类元素。如果只有一个父级，媒体查询会更容易控制不同的屏幕尺寸。