Как разместить ярлыки как на картинке через flex?

Question

[kaidos]

Мне нужно разместить ярлыки как на картинке:



У меня выходит вот так:



Мой код ссылка на CodePen.

Answer 1

[approximate solution]

Не надо мучить себя флексами. Флексы удобны когда - вы размещаете что-то по горизонтали, вертикали одномерно.

Видите "сложную" сетку - делайте гридом. Вся ваша разметка размечается строками grid-temlate-column, rows, areas, и настройками ширины.