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

Question

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

具有以下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 在容器内平均分配我的 flex 项目吗？或者 calc 与此问题无关？

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

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

非常感谢您的建议。

Answer 1

您不需要很多容器，一个 parent div 应该足以容纳“.box”类元素。使用一个 parent，媒体查询将更容易控制不同的屏幕尺寸。

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

Is there a way to achieve my Flexbox layout with calc?

html

css

media-queries

flexbox

responsive-design