Flexbox 3 div，两列，一列两行 [英] Flexbox 3 divs, two columns, one with two rows

问题描述

我正在尝试

<div></div><div></div>

三个连续的div并变成下面的.其中红色是 div 1，绿色是 div 2，蓝色是 div 3.

我可以用浮点数来做到这一点，比如

.div1 { 浮动:左；}.div2 { 浮动:左；}.div3 { 浮动:左；}

但我似乎无法让它在 flexbox 中工作，这可能吗?

解决方案

合法方法:
*推荐

.flex-row {弹性方向:行；显示:弹性；}.flex 列 {弹性方向:列；显示:弹性；}.flex-body {显示:弹性；}.flex-body div:not([class*="flex"]) {边框:1px纯白色；弹性:1 1 200px；宽度:300px；}

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

黑客方法:
*不推荐(我相信你会注意到原因)

.flex-body {显示:弹性；flex-direction: 行反向；flex-wrap: 包裹;justify-content: flex-end;对齐内容:拉伸；对齐项目:拉伸；变换:旋转(90度)；最大宽度:500px；保证金:自动；}.flex-body div {边框:1px纯白色；高度:300px；弹性:1 1 200px；}.flex-body div:last-of-type {弹性:1 1 300px；高度:300px；}

<div style="background: #0980cc;"></div><div style="background: #09cc69;"></div><div style="background: #cc092f;"></div>

I am trying to take

<div></div>
<div></div>
<div></div>

Three sequential divs and turn it into below. Where red is div 1, green is div 2, blue is div 3.

I can do this with floats, something like

.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }

But I can't seem to get it working in flexbox, is this possible?

解决方案

The Legit Method:
*Recommended

.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>

The Hackish Method:
*Not Recommended (I'm sure you'll notice why)

.flex-body {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: stretch;
    align-items: stretch;
    transform: rotate(90deg);
    max-width: 500px;
    margin: auto;
}

.flex-body div {
    border: 1px solid white;
    height: 300px;
    flex: 1 1 200px;
}

.flex-body div:last-of-type {
    flex: 1 1 300px;
    height: 300px;
}

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

这篇关于Flexbox 3 div，两列，一列两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！