使用自定义包装规则实现此 3 列响应式布局的最有效方法是什么？

Question

起初这看起来像是一个标准的 3 列布局，但辅助列环绕的方式并不常见，而且似乎不适合 flexbox 的环绕模型，无论是在正向还是反向模式下。也许网格是比 flexbox 更好的解决方案？如果可能的话，我想避免媒体查询，但当然一个可行的解决方案比 none.

设计约束

当有足够的 space (1200px) 时，所有列以固定宽度相邻显示。
当只有 MAIN 和 AUX1 (1000px) 的空间时，AUX2包裹在下面并填充宽度。
当只有 MAIN (800px) 的空间时，两个辅助列都环绕在下方并以 50% 的宽度彼此相邻。
随着屏幕继续缩小，布局保持与每 800px 相同，但所有列按比例缩小而不会溢出屏幕边界。
None 三个内容区域可以重叠或交叉。

Answer 1

这是我专为您创建的:)。

编辑：这是一种使用网格的新方法，该网格将形成添加到 div 的内容。如果这有效，请告诉我。

.contain {
  width: 100%;
  height: 100%;
  text-align: center;
}

.wrap{
   display: inline-flex;
}

.aux2{
  background-color: orange;
  width: 200px;
  display: inline-flex;
}

.main{
  background-color: blue;
  width: 800px;
   display: inline-flex;
}

.aux1{
  background-color: green;
   width: 200px;
    display: inline-flex;
}


@media (max-width: 1200px){
  .wrap{
   display: grid;
   justify-items: center;
   grid-template-areas: auto auto;
   grid-template-rows: auto auto;
}

.aux2{
  background-color: orange;
  width: 100%;
  display: inline-flex;
  grid-row: 2;
  grid-column: 1 / span 2;
}

.main{
  background-color: blue;
  width: 800px;
   display: inline-flex;
    grid-row: 1;
}

.aux1{
  background-color: green;
  width: 200px;
  display: inline-flex;
   grid-row: 1;
}
}

@media (max-width: 1000px){
  .wrap{
   display: grid;
   grid-template-areas: auto auto;
   grid-template-rows: auto auto;
}

.aux2{
  background-color: orange;
  width: 100%;
  display: inline-flex;
  grid-row: 2;
  grid-column: 1;
}

.main{
  background-color: blue;
  width: 100%;
   display: inline-flex;
   grid-row: 1;
   grid-column: 1 /span 2;
}

.aux1{
  background-color: green;
  width: 100%;
  display: inline-flex;
  grid-row: 2;
  grid-column: 2;
}
}

<div class="contain">
<div class="wrap">
<div class="aux2">aux2</div>
<div class="main">main</div>
<div class="aux1">aux1</div>
</div>
</div>

使用自定义包装规则实现此 3 列响应式布局的最有效方法是什么？

What's the most efficient way to implement this 3-column responsive layout with custom wrapping rules?

css

layout

responsive-design

设计约束