Как расположить блоки таким образом с помощью flex?

Question

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

Как с помощью флексов расположить блоки таким образом:



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

Answer 1

[Арсений Матыцин]

https://codepen.io/i-am-studio_ru/pen/KKVqoWL

Но на самом деле проще на гридах с grid-gap.

Comments

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

спасибо большое!

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

подскажите, пожалуйста. как у вас получилось так сделать?

[Арсений Матыцин]

Артур Левенсон, ну садись, сынок, слушай.

Началось все в далеком 2007-м году, когда я в принципе заинтересовался этой темой, в 8-9-м батрачил у хостинг-провайдера, но понял, что администрирование это не шибко мое (ошибочно, как оказалось в будущем), поэтому к 9-му году я начал комплексное обучение всему этому вебу, программированию, дизайну, экономике и т.д. С 2010-го начал практику на уровне фрилансера. У нас не было почти ничего толкового из того, что есть сейчас: старый ушатанный PS, табличная верстка и float. И да, у нас тогда глотком свежего воздухе был jQuery.

Я учился, получал новые знания и рос, как специалист. И все кардинально изменилось в году 15-м. Год появления ES2015, который привнес в язык все то, что красиво оборачивал jQuery, начали потоком сыпаться нововведения в CSS3, HTML5 и все-все вот это вот радостное такое.

А вместе с ними приехали и флексы. Сперва я долго их не трогал в принципе, пока они не вошли в принятый браузерами стандарт, но потом быстро втянулся и освоил их, они мне понравились, реально крутая штука.

Не так давно, с годик–два назад я обратил внимание и на входящие в поддержку гриды и точно также быстро в них въехал. Сейчас повседневно использую флексы и гриды.

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