css flexbox特殊2列布局

Question

我正在玩flexbox，想要創建兩列的佈局。

我有以下HTML結構：

<div class="wrapper"> 
    <div id="1" class="h">1</div> 
    <div id="2" class="c">2</div> 
    <div id="3" class="h">3</div> 
    <div id="3" class="c">4</div> 
    <div id="4" class="h">5</div> 
    <div id="5" class="c">6</div> 
</div> 

是它在某種程度上可以對齊項目，如在畫面？

> link to screenshot

Answer 1

我看不到你的截圖，但它似乎對我來說，你的CSS應和這樣的：

.h{ 
    float:left; 
} 
.c{ 
    float:right; 
} 
.h, .c{ 
    width:45%; 
    padding:2.5%; 
} 

Answer 2

click here來檢查我的版本的它

小提琴

.h, .c{ 
 
    background:#ccc; 
 
    width:100%; 
 
    min-height:50px; 
 
    text-align:center; 
 
    line-height:50px; 
 
    margin-bottom:2px; 
 
} 
 

 
.c{ 
 
    background:#666; 
 
    } 
 
    
 
    .wrapper{ 
 
    min-width:50%; 
 
    } 
 
    
 
    
 

 
.wrapper-main{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    
 
}

<div class="wrapper-main"> 
 
<div class="wrapper"> 
 
    <div id="1" class="h">1</div> 
 
    <div id="3" class="h">3</div> 
 
    <div id="4" class="h">5</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div id="2" class="c">2</div> 
 
    <div id="3" class="c">4</div> 
 
    <div id="5" class="c">6</div> 
 

 
</div> 
 
</div>

Answer 3

首先，不要啓動idwith a number。接下來，你最好用這個漂浮物。

.wrapper > div { 
    width: 50%; 
    margin-top: 2px; 
} 

.wrapper > div:nth-child(odd) { 
    float: left; 
    clear: left; 
} 

.wrapper > div:nth-child(even) { 
    float: right; 
    clear: right; 
} 

請參閱fiddle。