你如何“堆叠”单独列中的弹性元素？答案

【问题标题】：How do you "stack" flex elements that are in seperated columns?你如何“堆叠”单独列中的弹性元素？
【发布时间】：2018-12-17 20:12:52
【问题描述】：

我已经使用 flex 属性和 flex-flow: column nowrap 显示了我的元素。我已经快速展示了我的元素的样子：[this]

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

【问题讨论】：

您希望您的元素看起来像图片上的样子？还是什么？
对不起，如果我不够清楚，图片就是我所做的。现在我希望两列合二为一？这样所有元素都在移动设备之上。

标签： javascript html css ajax flexbox

【解决方案1】：

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

当屏幕尺寸变小时，您可以将其排成行，并删除一个占位符。这样一来，您就可以保持一切简单和干净。

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

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

编辑：忘记删除移动尺寸的占位符。给你：http://jsfiddle.net/d9jg1p2s/1/

【讨论】：

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

【讨论】：