CSS显示：桌面和移动设备上的Flex

我刚开始使用FLEXBOX，对使用桌面和移动设备的布局有疑问

我使用标签显示信息，而不是表单上的数据

在桌面上，我希望它显示如下：

标签----标签----标签----标签----标签

数据----数据----数据----数据

在桌面上，标签和数据将是基于元素数量的百分比

但是，在手机上，我希望它显示如下：

标签--- 资料----

标签--- 资料----

标签--- 资料----

标签--- 资料----

标签--- 资料----

在手机上，我希望标签和数据的宽度为25%和75%

不确定在HTML上是否应该这样布局

<div class="container">
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
</div>

或

任何指导都会很好！

---

谢谢

我会像第一个选项一样订购。然后，在桌面视图中，我将创建一个灵活的列包装流程，为容器设置一个高度，并将每个灵活项设置为50%的高度

在mobile上，id切换到flex flow:row wrap，并定义容器的宽度，然后25%/75%的每个子级取决于哪个子级

HTML:

---

听起来你在HTML结构上很灵活。 我建议将数据对与父元素分组，生成列和行。 使用两个嵌套的FlexBox，可以根据需要更改flex方向

/*用于演示目的*/ var$body=$'body'； $'按钮'。单击'按钮'，函数{ $body.toggleClass'small'； }; .集装箱{ 显示器：flex； 柔性包装：包装； 背景颜色：浅绿色； } .组{ 显示器：flex； 弯曲方向：立柱； } .项目{ 填充物：25em.5em； } @介质最小宽度：700px{ .集装箱{ 背景颜色：浅蓝色； 弯曲方向：立柱； } .组{ 弯曲方向：行； } } /*用于演示目的*/ .小集装箱{ 背景颜色：浅蓝色； 弯曲方向：立柱； } .小组{ 弯曲方向：行； } 钮扣{ 位置：绝对位置； 顶部：100px； } 标签1 数据1 标签2 数据2 标签3 数据3

---

模拟尺寸变化这确实是一个可以提问但不可以提问的地方我不知道怎么做，为我做吧。。。您只是列出了您的需求，并等待我们为您添加，所以这不是一个编程问题。那么，一个服务台或论坛还不够公平吗。我尝试过但失败了，所以我认为这是一个联系其他程序员寻求帮助的好地方。我尝试过但失败了->简单地分享你的尝试或至少一次，这将是一个有效的问题；

<div class="container">
   <div class="label">label</div>
   <div class="label">label</div>
   <div class="label">label</div>
</div>
<div class="container">
   <div class="data">data</div>
   <div class="data">data</div>
   <div class="data">data</div>
</div>

<div class="container">
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
</div>

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 500px; // what ever you want here
}

.label, .data {
  height: 45% // Less than 50% for margins, etc.
}

@media only screen and (max-width: 900px) { //Set desired width to call 'mobile'
  .container {
    flex-flow: row wrap;
    width: unset;
    height: 500px; //Whatever you want again
  }

  .data {
    width: 70%;
  }

  .label {
    width: 22%;
  }
}