将Flex项目从项目列内移动到其自己的列

Question

如果我有一个带有三个孩子的弹性容器flex-direction: column,并且我想将中间孩子向右移动,同时将第一个和第三个孩子保持在左侧,我该怎么做？

flexbox甚至是正确的方法还是其他更合适的东西？

这是我的尝试:

.container {
  display: flex;
  flex-flow: row wrap;
  @media (max-width: 840px) {
    flex-flow: column wrap;
  }
}
.red,
.green,
.blue {
  width: 50%;
  @media (max-width: 840px) {
    width: 100%;
  }
}
.red {
  background-color: red;
  height: 100px;
}
.green {
  background-color: green;
  height: 300px;
}
.blue {
  background-color: blue;
  height: 100px;
}

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

http://codepen.io/dye/pen/mOeZma

它很接近,但并不完全存在.当绿色div向右移动时,红色和蓝色之间存在很大差距.

任何意见,将不胜感激.谢谢!

Answer 1

答案是不。Flexbox 不具备您想要的灵活性，尤其是在构建动态时。

如果这是静态的

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.holder {
  width: 50%;
}
.holder .red, .holder .blue {
  width: 100%;
}

.red,
.green,
.blue {
  width: 50%;
}

.red {
  background-color: red;
  height: 100px;
}

.green {
  background-color: green;
  height: 300px;
}

.blue {
  background-color: blue;
  height: 100px;
}

<div class="container">
  <div class="holder">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
  <div class="green"></div>
</div>

所以，答案可能在javascript中。

我更喜欢只使用砖石。

http://masonry.desandro.com/

说明很简单。设置起来很容易。