Flexbox模式1/3/3列和行組合

Question

我想讓div 1變大，然後div 2和3疊在它旁邊並且高度相等，但它會根據內容和再有DIV 4，5，6上的下一行，但相等的寬度爲2和3

------------------ 
|   | 2 | 
|  1  |-----| 
|   | 3 | 
------------------ 
| 4 | 5 | 6 | 
------------------ 

<div class="d-flex"> 
    <div class="hero">I'm Box 1<br>Some other text 
    <br>Some other text 
    <br>Some other text 
    <br>Some other text</div> 
    <div class="hero">Box 2</div> 
    <div class="hero">Box 3</div> 
    <div class="hero">Box 4</div> 
    <div class="hero">Box 5</div> 
    <div class="hero">Box 6</div> 
</div> 

CSS

html, 
body { 

} 

body { 
    font-family: 'Raleway', sans-serif; 
    font-size: 22px; 
    font-weight: 600; 
    text-transform: uppercase; 
    color: #FFF; 
} 

.d-flex { 
    display: flex; 
    flex-wrap: wrap; 
    text-align: center;  
} 

.d-flex > div { 
    margin: 5px; 
} 

.hero { 
    flex: 0 0 calc(33.33% - 10px); 
    padding: 30px 0; 
    background: #7e58b7; 
    border-radius: 3px; 
} 

.hero:first-child { flex-basis: calc(66.66% - 10px); } 
.hero:nth-child(2), 
.hero:nth-child(3) { 
    flex: 1 0 0; 
} 
@media (max-width: 736px) { 
    .hero { flex-basis: calc(50% - 10px); } 
    .hero:first-child { flex-grow: 1; } 
} 

* { 
    box-sizing: border-box; 
} 

我這兒也有一個小提琴https://jsfiddle.net/abennington/jqc0gkyo/4/

謝謝你很多提前！

Answer 1

對於帶有柔性盒的這種佈局，您需要對柔性盒進行增光處理，重置一些柔性值以設置噴灑盒子的初始區域。

從引導程序4或純CSS（使用相同的類名稱），您可以交替行和列以放置組框。

我添加了背景漸變和不透明度，以查看您希望噴塗您的盒子的9個區域。注意它是最初的佈局，一旦充滿內容，高度可能會有所不同。

.d-flex { 
 
    display: flex; 
 
} 
 

 
.flex-column { 
 
    flex-direction: column 
 
} 
 

 
.f1 { 
 
    flex: 1.02; 
 
} 
 

 
.f2 { 
 
    flex: 2; 
 
} 
 

 
body>.d-flex { 
 
    margin: 10px; 
 
    min-height: 90vh; 
 
    /* see areas */ 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 33.33%, transparent 33.33%, transparent 66.66%, rgba(0, 0, 0, 0.2) 66.66%), linear-gradient(to right, rgba(0, 0, 0, 0.2) 33.33%, transparent 33.33%, transparent 66.66%, rgba(0, 0, 0, 0.2) 66.66%) 
 
} 
 

 
.d-flex>.hero { 
 
    margin: 10px; 
 
    /* see areas through */ 
 
    opacity: 0.8; 
 
} 
 

 
.hero { 
 
    padding: 30px 0; 
 
    background: #7e58b7; 
 
    border-radius: 3px; 
 
} 
 

 
body {}

<div class="d-flex flex-column"> 
 
    <div class="d-flex f2"> 
 
    <div class="hero f2">I'm Box 1<br>Some other text 
 
     <br>Some other text 
 
     <br>Some other text 
 
     <br>Some other text</div> 
 
    <div class="d-flex flex-column f1 "> 
 
     <div class="hero f1">Box 2</div> 
 
     <div class="hero f1">Box 3</div> 
 
    </div> 
 
    </div> 
 
    <div class="d-flex f1"> 
 
    <div class="hero f1">Box 4</div> 
 
    <div class="hero f1">Box 5</div> 
 
    <div class="hero f1">Box 6</div> 
 
    </div>

pen to play with including bootstrap-4 library