小编Gli*_*arn的帖子

我正在尝试使用 Flexbox 实现以下响应式网格布局，但我无法在没有固定高度的情况下获得“桌面”版本。我希望 #1 单独位于左侧，#2 和 #3 彼此堆叠在右侧（#1 不必与右列具有相同的高度）

HTML（简化）

<div class="wrapper">
  <div class="inner">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
  </div>
</div>

CSS（简化）

.wrapper {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #c4c4c4
}

.col1, .col2, .col3 {
  background: #fe4c4c;
  position: relative;
  margin: 10px;
  padding: 5px;
  color: #FFF;
  font-weight: bold;
  font-size: 40px;
  font-family: sans-serif;

  min-height: 100px;

  &:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.col1 {
  &:after {
    content: '1';
  }

  width: 100px;
} …