您如何“堆叠”单独列中的flex元素？

Question

我已经使用flex属性和flex-flow：列nowrap显示了元素。我已经快速展示了元素的外观：[this]

因此，显然我不能将两列都堆叠在一起，因为我使用ajax调用对每个元素进行编号，我的左列是偶数，右列是奇数。我想知道如何在不破坏代码的情况下实现这一目标。我这样做是为了让移动用户可以响应。

Answer 1

我不明白你为什么要这样做吗？

当屏幕尺寸变小时，您可以将其成行，并使用占位符删除。这样，您就可以保持所有操作的简洁和干净。

- container
-- row
--- box
--- placeholder
--- box
--- placeholder

像这样：http://jsfiddle.net/d9jg1p2s/

---

编辑：忘记删除移动尺寸的占位符。 在这里，您可以去：http://jsfiddle.net/d9jg1p2s/1/

Answer 2

在flexbox中没有合并容器的方法，但是有一种方法可以将容器视为不存在的容器。

它是display:contents

  

浏览器（Firefox除外）将从可访问性树中删除任何具有设置了内容显示值的元素。这将导致屏幕阅读技术不再宣布该元素及其所有后代元素。

     

^MDN

不幸的是，

Support不是通用的，但正在增长。

然后..只需将“新”列中的每个备用元素对齐到align-self: flex-end;

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width:150px;
  height:150px;
  border:2px solid rebeccapurple;
}

body {
  width: 55%;
  min-width:150px;
  margin:1em auto;
  border:1px solid limegreen;
  display: flex;
  flex-direction: column;
}

.box:nth-child(odd) {
  align-self: flex-end;
}

.container {
  display:contents;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">3</div>
  <div class="box">5</div>
  <div class="box">7</div>
  <div class="box">9</div>
  <div class="box">11</div>

</div>

<div class="container">

  <div class="box">2</div>
  <div class="box">4</div>
  <div class="box">6</div>
  <div class="box">8</div>
  <div class="box">10</div>
  <div class="box">12</div>
</div>