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

假设我们有两个div包装器。请注意，每个包装纸的宽度和/或高度都可以改变。包装器内部有几个div。 div的数量可以从1更改为〜。

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

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

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

将this pen视为模板。

最佳答案

使用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。