css - 奇数堆栈的最佳 CSS Flex 布局(桌面/移动)

Question

<分区>

Answer 1

在我看来，您应该使用这种类型的 html 和 css 结构。

希望对你有帮助

让我知道进一步的说明。

.container {
display: flex;
width: 100%;
height: 300px;
flex-wrap: wrap;
}

.column {
flex: 1;
display: flex;
flex-direction: column;
font-size: 50px;
text-align: center;
}

.button {
flex: 1;
color: #fff;
border: 2px solid;
}

.button.rowspan {
flex: 2;
}

<div class="container">
  <div class="column">
    <div class="button" style="background: green">1</div>
    <div class="button" style="background: blue">2</div>
  </div>
  <div class="column">
    <div class="button rowspan" style="background: red;">3 - rowspan</div> 
  </div>
</div>