html - 是否有响应式垂直显示 : flex?(无表格/无 JS)

Question

假设我们有两个 div 包装器。请注意，每个包装器的宽度和/或高度都可以改变。在这个包装器中有几个 div。 div 的数量可以在 1 到 ~ 之间的任何地方变化。

我想要水平 View 和垂直 View 。 为了获得均匀的水平分布，使用了 css 属性 display: flex;。

我想垂直实现同样的效果。 display: table; 非常接近我想要实现的目标。然而，对于表格，我们根本无法改变高度。

    +-----+-----+-----+            +-----------------+
    |     |     |     |            |                 |
    |     |     |     |            +-----------------+
    |     |     |     |            |                 |
    |     |     |     |            +-----------------+
    |     |     |     |            |                 |
    +-----+-----+-----+            +-----------------+
       display: flex;                 ??????: ????;

考虑 this pen作为模板。

Answer 1

使用 flex-direction 改变 flexbox 的显示方式。
它可以采用的值:row | 行反转 | 列 | 列反转。默认为行。

.flexible {
  display: flex;
  flex-direction: column;
}

<div class="flexible">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

查看 this guide帮助你使用 flexbox。