Css 如何确定flex中的列数

我有4个元素要显示在移动屏幕上。我想让它们在纵向视图上显示为两列，每列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>

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

如果可以，您可能想使用它，因为它本机支持多个列

也就是说，这在flexbox中是可能的，只是有点违反直觉。而不是使用

flex-direction:column，您应该将其保留在
弹性方向：行和设置
柔性包裹：包裹以启用元素换行到新行。然后，如果设置
flex:0 50%（意思是不增长、不收缩，并使用50%作为基本宽度），您将得到两列，下面包含附加元素

要将其更改为纵向视图上的堆栈，您可以使用媒体查询将
flex基准
更改为100%（flex
属性中的第三个参数）


.flex{
显示器：flex；
柔性包装：包装；
}
.柔性标签{
弹性：0.50%；
}
@媒体（方向：纵向）{
.柔性标签{
弹性基准：100%；
}
}

计划1
计划2
计划3
计划4
您需要设置每列的宽度。您可以为
.flex
类的子类设置宽度，也可以创建另一个宽度。例如，如果需要4列，则必须为每个
标签设置
宽度：25%
。对于不同的尺寸，您必须使用
@media
设置尺寸，如：

/* Phone landscape and bigger */
@media (min-width: 640px) {
  .label {
    width: 25%;
  }
}

在这种情况下，最好像这样使用
@media querys
：

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

首先，将
标签
包装成
div
，如下所示：

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

使用flex属性和媒体查询在屏幕方向/大小之间进行调整


文章{
显示器：flex；
宽度：75%；
保证金：0自动；
}
部分{
弹性：1；/*见注1*/
}
h3{
文本对齐：居中；
}
h3：第一个孩子{
显示：无；
}
@介质（最大宽度：600px）{
h3：第一个孩子{
显示：块；
}
h3：第n个孩子（2）{
显示：无；
}
文章{
柔性包裹：包裹；/*见注2*/
}
部分{
弹性：1 0 34%；/*见注2*/
}
}
/*可以忽略下面的样式；仅装饰性*/
文章{填充：5px；背景色：#f5；边框：1px实心#ccc；}
截面{高度：50px；背景色：浅绿色；边框：1px实心#ccc；
显示：flex；对齐内容：居中；对齐项目：居中；字体大小：1.2em；}
纵向视图
景观
计划1
计划2
计划3
计划4
您可以在此处使用
vmin
和
vmax

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

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


.flex{
显示器：flex；
柔性包装：包装；
}
.柔性标签{
最大宽度：50vmin；
最小宽度：25V最大；
}
身体{
保证金：0；
宽度：100vw；
高度：100vh；
}

计划1
计划2
计划3
计划4
标签
元素只能用于标签表单元素。我的身体需要设置为100%的高度和宽度。它还会这样工作吗？@CainNuke是的，vmin和vmax的值基于视口（设备/窗口的尺寸），而不是整个页面的大小
50vw
表示50%的设备宽度，
50vh
表示50%的高度，
50vmin
表示50%的高度或宽度，以最小值为准谢谢，您的答案是最简单的解决方案。
.first {
 width: 50%;
}

.second {
 width: 50%;
}

@media screen and (max-width: 640px) {
.first .second {
 width: 100%;
}