是否有响应式垂直显示：flex？ （没有表/没有JS）

Question

假设我们有两个div包装器。请注意，每个包装可以改变宽度和/或高度。这个包装器里面有几个div。 div的数量可以在1到〜之间变化。

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

我想垂直达到同样的效果。 display: table;非常类似于我想要实现的目标。但是，对于桌子，我们根本无法改变高度。

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

将this pen视为模板。

Answer 1

使用flex-direction更改柔印箱的显示方式 它可以采取的值：row | row-reverse | column | column-reverse。默认为行。

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

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

查看this guide以帮助您使用Flexbox。

Answer 2

使用属性flex-direction: column，您可以更改对齐的方向。

我会推荐这个网站：http://flexbox.help/。它描述并允许测试flexbox的所有属性。

Answer 3

您使用flex-wrap ..

.wrapper-h {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

http://codepen.io/anon/pen/zNVypq