html - 如何对 flex-children 进行分组并向不同的方向展示它们？

Question

我是 flexbox 的新手，我找不到解决我的问题的方法。 我在一个段落中有一个标签、一个图像、一个输入和一个图像。我将 display:flex 添加到我的段落中，这使我的图像与输入非常好地对齐。

<p style='display:flex'><label>
    <image><input><image>
</p>

当我的分辨率很小时，我想将我的内容居中并将标签放在我的输入上方，如下所示:

<p><label>
<MINUS-image><input><PLUS-image></p>

当我的分辨率低于 600 像素时，我将 flex-direction: column 添加到我的段落中(并对我的标签做了一些居中处理)。但随后一切都在一列中。

<p><label>
<MINUS-image>
<input>
<PLUS-image></p>

有没有办法对我的图像和输入进行分组，使它们保持在一行中？

Answer 1

不要更改column，而是使用flex-wrap: wrap 并将label 的宽度设置为100%。

使用媒体查询，在较窄的屏幕上，这将使 label 占据其父元素 p 的整个宽度，并将其他元素推到第二个行，而不是像 column 那样将它们全部垂直堆叠。

堆栈片段

p {
  display:flex;
}

@media (max-width: 600px) {
  p {
    flex-wrap: wrap;
  }
  p label {
    width: 100%;
  }
}

<p>
  <label>Label</label>
  <span>image</span>
  <input>
  <span>image</span>
</p>