使用flex布局把三个元素分配成两列，第二列垂直布局两个元素

原创已于 2024-10-23 23:00:53 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2021-03-18 15:40:21 首次发布

前端开发相关专栏收录该内容

969 篇文章

订阅专栏

博客给出了一个Stack Overflow链接，涉及Flexbox布局中三个div实现两列布局，其中一列有两行的问题及解决方案，属于前端CSS布局相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://stackoverflow.com/questions/43056180/flexbox-3-divs-two-columns-one-with-two-rows/43057107

最后要实现的效果：

解决方案：

.flex-row {
    flex-direction: row;
    display: flex;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-body {
    display: flex;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 300px;
}

<div class="flex-body">
  <div class="flex-row">
    <div style="background: #0980cc;"></div>
  </div>
  <div class="flex-column">
    <div style="background: #09cc69;"></div>
    <div style="background: #cc092f;"></div>
  </div>
</div>