Как сверстать данный блок с помощью flex?

Question

[Артур Левенсон]

Как с помощью flex добиться вот такого результата расположения блоков?



https://codepen.io/kiskiskit/pen/xxOVQdQ

Answer 1

[Икотий Айтишевич]

Вот так: https://codepen.io/garisun/full/qBNNOpg
Но вообще читайте — это полезно. Хотя бы статьи, а лучше ещё книги и твиттеры ведущих разработчиков.
Вот Вам статья про основные раскладки блоков: https://habr.com/ru/post/522880/

Comments

[Артур Левенсон]

спасибо большое за советы. В моей голове всё ещё не укладывается как расположить текст змейкой, как показано на картинке. Я сделал во вашему совету, но добиться расположение текста змейкой мне всё так же не удалось

https://codepen.io/kiskiskit/pen/xxOVQdQ

[Икотий Айтишевич]

Артур Левенсон, Если Вам нужно реализовать текст змейкой, то это можно сделать через гриды.

[Артур Левенсон]

Null, понял, спасибо. можете пожалуйста объясните как мне с помощью гридов это можно реализовать? я никогда не сталкивался с гридами. после вашего совета пошёл сразу же изучать grid garden

Answer 2

[Никита Михайлов]

1. display: flex
   
2. justify-content/margin/padding
   
3. order
   

Где именно проблема?

Comments

[Артур Левенсон]

Проблема заключается в непонимание как расположить текст змейкой. Использовать для этой цели order?

вот что у меня сейчас получилось: https://codepen.io/kiskiskit/pen/xxOVQdQ

Answer 3

[maralov]

.about-item{ display: flex}
.about-item:nth-child(2n) p { order: 1}

У Каждого четного about-item параграфу меняйте порядок через order.
Ну или не параграф а картинке ... там уже как надо докрутите