@moiseev1788

Flex как перенести объект на другую строку?

На странице есть элементы, которые при десктопе расположены в ряд. При мобильной версии, один из элементов, который находится по середине, должен располагаться на новой строке, как при помощи flex, это можно сделать?

5f37cf1496435467277385.png

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>


.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Было бы конечно лучше обернуть первые два блока в дополнительный контейнер, манипулировать которым будет проще в дальнейшем:



Но если менять разметку не вариант, можно сделать например вот так:



То есть, третий блок прибит к правому краю через абсолютное позиционирование.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Самое простое что увидел - дать каждому блоку с цветом доп. обертку для того что бы родитель(контейнер) мог управлять размером по сетке:
На мобильных order для того что бы поменять обертку + блок местами, с помощью flex-basis: 50%(прописывается первым двум блокам на верхней строке)вынести 3й блок на новую строку, у container - если он все таки является корневым родителей, должно быть flex-wrap: wrap;
https://codepen.io/approximate_solution2k20/pen/OJNNxLm
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы