css - 如何在flex中建立列数

Question

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

纵向 View :

Plan 1  Plan 2
Plan 3  Plan 4

横向 View :

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

你可以在这里使用 vmin 和 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>