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检查我的版本的小提琴

＆＃13;

＆＃13;

.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; 
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先，不要开始id with 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。