如何设置flex中的列数

Question

我有 4 个元素要显示在移动屏幕上。我想让它们在纵向视图上显示为 2 列，每列 2 个元素，在横向视图上显示为所有 4 个元素的单行。

纵向视图：

Plan 1  Plan 2
Plan 3  Plan 4

景观：

Plan 1  Plan 2 Plan 3  Plan 4

这是我的 html 代码：

<div class="flex">
 <label>Plan 1</label>
 <label>Plan 2</label>
 <label>Plan 3</label>
 <label>Plan 4</label>
</div>

我的CSS：

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

我只能拉出 1 列。我应该怎么办？

Answer 1

你可以在这里使用vminand vmax。

要使项目换行到下一行，请使用flex-wrap: wrap.

如果 Flex 容器没有占据屏幕的整个宽度，请将这些值替换为.flex的相应尺寸

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex label {
  max-width: 50vmin;
  min-width: 25vmax;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

<div class="flex">
 <label>Plan 1</label>
 <label>Plan 2</label>
 <label>Plan 3</label>
 <label>Plan 4</label>
</div>