css flexbox 特殊 2 列布局答案

【问题标题】：css flexbox special 2 column layoutcss flexbox 特殊 2 列布局
【发布时间】：2016-07-12 00:53:26
【问题描述】：

我正在玩 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

【问题讨论】：

与弹性框自然？不......你可以强制它，但你可以强制任何布局。

标签： css layout flexbox

【解决方案1】：

我看不到你的截图，但在我看来你的 css 应该是这样的：

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

【讨论】：

我的文章底部有一个链接指向我已经尝试过浮动的屏幕截图，但这种方法不起作用
刚刚看到你的截图，是的，这个 css 应该适合你

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：