Flexbox的小網格

我嘗試用flexbox創建這個小畫廊網格，但我一直都失敗。Flexbox的小網格

是否有可能與Flexbox的？這是我的例子和fiddle。

<div class="gallery"> 
    <div class="box one">Box 1</div> 
    <div class="box two">Box 2</div> 
    <div class="box three">Box 3</div> 
    <div class="box four">Box 4</div> 
    <div class="box five">Box 5</div> 
</div> 

.gallery { 
    display:flex; 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap;} 

.gallery .box { 
    background:#ccc; 
    height:250px; 
    width:33.33333%;} 

.gallery .box.one, 
.gallery .box.two { 
    -webkit-flex:1; 
    flex: 1;} 

.gallery .box.three { 
    height:500px;} 

.gallery .box.four, 
.gallery .box.five { 
    -webkit-flex:1; 
    flex: 1;}

來源

2017-03-17 Pepe

做所有的箱子一定是兄弟姐妹？他們不能嵌套？據我所知，flexbox不會用你當前的標記實現這一點。 –

@邁克爾埃文斯是的，這就是問題所在，他們都必須是兄弟姐妹。 – Pepe

從頭開始評論，看看我的回答如下 –

好的，你有沒有試過使用flex-direction: column？它需要您對Flexbox的思考方式稍作改動。請嘗試以下操作：

.gallery { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    max-height: 200px; // or however you want to do it, required for wrapping 
} 

.box { 
    height: 100px; 
} 

.three { 
    height: 200px; 
}

來源

2017-03-17 22:43:50

是的，我已經嘗試過「flex-direction：column」，但它似乎是我錯過了一些東西，因爲你的例子有效！非常感謝你！ – Pepe

你可以嘗試這樣的事情：

創建3周家長的div。
在寬度100％和高度50％和flex-direction column的每個第一和第三個div中創建兩個子div。

#grid{ 
 
    width:100%; 
 
    height:500px; 
 
    background:#eee; 
 
    display:flex; 
 
    
 
} 
 
#p1,#p2,#p3{ 
 
    width:33%; 
 
border:2px solid #fff; 
 
    display:flex; 
 
flex-direction:column; 
 
} 
 
#pone,#ptwo,#p31,#p32{ 
 
    flex-basis:100%; 
 
    height:50%; 
 
    border:3px solid white; 
 
    
 
    
 
}

<div id="grid"> 
 

 

 
<div id="p1"> 
 
<div id="pone"> 
 

 
</div> 
 
<div id="ptwo"> 
 

 
</div> 
 
</div> 
 
<div id="p2"> 
 

 
</div> 
 
<div id="p3"> 
 
<div id="p31"> 
 

 
</div> 
 
<div id="p32"> 
 

 
</div> 
 

 
</div> 
 
</div>

來源

2017-03-17 22:54:40

Flexbox的小網格

回答

相關問題