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

问题描述

我试图采取

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

三个顺序div并将其转化为下方。其中红色是div 1，绿色是div 2，蓝色是div 3。

我可以用浮点数来做到这一点，就像

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

但我似乎无法在flexbox中使用它，这可能吗？

解决方案

黑客方法：

*不推荐（我敢肯定你会注意到为什么）

  .flex-body {display：flex; flex-direction：row-reverse; flex-wrap：wrap; justify-content：flex-end; align-content：stretch; align-items：stretch;转换：旋转（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体区> < div style =background：＃0980cc;>< / div> < div style =background：＃09cc69;>< / div> < div style =background：＃cc092f;>< / div>< / div>  

合法的方法：

*建议

  .flex-row {flex-direction：row; display：flex;}。flex-column {flex-direction：column; flex-body div：not（[class * =flex]）{border：1px solid white; display：flex;}。flex-body {display：flex;}。 flex：1 1 200px; width：300px;}  

 < div class =flex体区> < 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>  

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

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>

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