带有列/行的自适应Flexbox

Question

我正在尝试创建一个稍微复杂的伸缩框，其行和列跨越其他div的整个宽度或高度。

例如，这是我的通用HTML：

<div class="container">
    <div class="top"></div>
    <div class="top-left"></div>
    <div class="bottom-left"></div>
    <div class="right"></div>
</div>

对于大屏幕我想要什么：

对于移动屏幕：

我可以自己弄清楚移动样式，这是我遇到的较大问题，因为它有一行（.top）跨容器的整个宽度，然后有另一行（.right）跨两列（.left-top和.left-bottom）。

Answer 1

您可以使用display：grid。

.top { grid-area: header; }
.top-left { grid-area: topLeft; }
.bottom-left { grid-area: botLeft; }
.right { grid-area: rightSide; }

.container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'topLeft topLeft topLeft topLeft rightSide rightSide'
    'botLeft botLeft botLeft botLeft rightSide rightSide';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media (max-width:768px){
  .container{
      grid-template-areas:
    'header header header header header header'
    'topLeft topLeft topLeft topLeft topLeft topLeft'
    'botLeft botLeft botLeft botLeft botLeft botLeft'
    'rightSide rightSide rightSide rightSide rightSide rightSide';
  }
}

<div class="container">
    <div class="top">1</div>
    <div class="top-left">2</div>
    <div class="bottom-left">3</div>
    <div class="right">4</div>
</div>