Как сверстать такой блок на флексах с изменением порядка его элементов?
Гриды не нужно.
Песочница: https://codepen.io/vlad-tarasoffka/pen/QWYyzZd
Сделать как на картинке. Не пойму как высоты третьей картинки сделать 100% на десктопе. А так поменять через order не проблема.
Дополнительно:
При неизвестном количестве контента (т.е. без возможности указать родителю фикс высоту), на флексах без доп.оберток - никак.
Соответственно, либо добавлять обертку либо вычислять высоту на js.
Но самый разумный способ это гриды.
См. изображение в вопросе. 1) Десктоп 2) Смартфон
Никакие обёртки тут не нужны, иначе порядок не поменяешь и 3-й блок не воткнёшь между 1-м и 2-м.
Я смотрю изображения. На них нет 3 между 1 и 2. Но обоих скринах идет 1, 2 потом 3. Т.е. 1 и 2 легко объединяются оберткой.
Но если нужно поменять, то в теории есть display contents, но это не поможет вашему клиенту с его древним компом.
Ответы:
Добавить:
* { box-sizing: border-box; } .wrapper { flex-wrap: wrap; } .block { flex-grow: 1; } |
* { box-sizing: border-box; } .wrapper { flex-wrap: wrap; } .block { flex-grow: 1; }
Так а чем такой вариант вас не устраивает ?
<div class="container"> <div class="block"> <div class="sub-block">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div> <div class="sub-block">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div> </div> <div class="block"> <div class="sub-block">Блок 3</div> </div> </div> |
<div class="container"> <div class="block"> <div class="sub-block">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div> <div class="sub-block">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div> </div> <div class="block"> <div class="sub-block">Блок 3</div> </div> </div>
.container { width:800px; margin:0 auto; display: flex; justify-content: space-between; } .block { width: 100%; border: 1px solid black; padding: 20px; box-sizing: border-box; } .sub-block { margin-bottom: 20px; } |
.container { width:800px; margin:0 auto; display: flex; justify-content: space-between; } .block { width: 100%; border: 1px solid black; padding: 20px; box-sizing: border-box; } .sub-block { margin-bottom: 20px; }
- Нет. Это работает только на десктопе, поэтому первые два нельзя запихивать в блок, потом не перестроишь на (см. картинку и пример)
- Вторая картинка, можно и так перестроить
@media (max-width: 767px) { .container { flex-direction: column; } }
@media (max-width: 767px) { .container { flex-direction: column; } }
- Влад, Представленный в этом ответе вариант - единственно возможный для решения вашей задачи с использованием только flex...при верстке с одним родителем у всех 3 блоков, флексом так элементы не выстроить.
Только у .block width скорее всего не 100%, а 50% для декстопа, и потом 100% уже для мобилки. - Влад,
потом не перестроишь
Перестроишь.
Для этого есть display contents.Но повторю, что разумно решать эту задачу гридами, а не костылями.
- Ankhena, с гридами всё понятно. Покажите пожалуйста, как решается подобная задача на флексах.
- Влад, да сколько можно-то? Я ведь в комментарии под вопросом уже написала, что при неизвестном содержимом без доп оберток или js никак
- Ankhena, Я не понимаю как это сделать с использованием дополнительных обёрток без JS.
- Влад, эммммм, теперь уже мне сложно.
Ответ с доп обертками вы отметили решением, что вам в нём не понятно? - Ankhena, Я погорячился, отметив это решением.
Очень сложный и скупой заказчик, у которого система стоит старая на компе. Туда новые браузеры не ставятся. Возможно с гридами будут проблемы.
См. изображение в вопросе. 1) Десктоп 2) Смартфон
Никакие обёртки тут не нужны, иначе порядок не поменяешь и 3-й блок не воткнёшь между 1-м и 2-м.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сверстать блок на флексах с изменением порядка его элементов, можно использовать свойство flex и свойство order в CSS.
Прежде всего, необходимо создать контейнер, в котором будут располагаться элементы в нужном порядке. Для этого можно использовать следующий код:
<div class="flex-container"> <div class="item">Элемент 1</div> <div class="item">Элемент 2</div> <div class="item">Элемент 3</div> </div>
Затем, применим стили к контейнеру и элементам:
.flex-container { display: flex; } .item { flex: 1; } .item:nth-child(1) { order: 2; } .item:nth-child(2) { order: 3; } .item:nth-child(3) { order: 1; }
В данном примере, элементы будут отображаться в порядке, определенном свойством order. Таким образом, элемент 1 будет отображаться последним, элемент 2 - первым, а элемент 3 - вторым.
Этот способ позволяет легко изменять порядок элементов внутри блока с использованием гибкости флексбокса. Не забывайте также о других свойствах флексбокса, которые могут пригодиться для настройки внешнего вида блока.