Flexbox的小网格

Question

我尝试用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;} 

Answer 1

好的，你有没有试过使用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; 
} 

Answer 2

你可以尝试这样的事情：

1. 创建3周家长的div。
2. 在宽度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>