HTML/CSS - Как сгруппировать flex-children и показать их в другом направлении?

Question

Я новичок в демонстрации:flex (вау, это действительно круто на соревнованиях, чтобы плавать), и я не могу найти решение для моей (простой) проблемы. У меня есть метка, изображение, вход и изображение в ряд (абзац). Я добавил display:flex к моему абзацу; который выравнивает мои изображения на входе очень хорошо.

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

Когда мое разрешение слишком мало, я хочу центрировать свой контент и поставить метку над моим вводом следующим образом:

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

Я добавил flex-direction: column к своему абзацу (и выполнил некоторые центрирующие элементы для моей метки), когда мое разрешение ниже 600px. Но тогда все в столбце.

<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>