CSS Flexbox-песочница

Flexbox выстраивает элементы вдоль одной оси — строки или столбца — и распределяет между ними пространство. Сложность в том, что несколько свойств влияют друг на друга: flex-direction задаёт главную ось, justify-content выравнивает элементы вдоль неё, align-items — по поперечной оси, flex-wrap решает, переносятся ли они на новую строку, а gap задаёт равномерные отступы. В этой песочнице можно менять каждое свойство и сразу видеть, как перестраиваются цветные блоки, — это самый быстрый способ набить руку или отладить непослушную раскладку. Добавляйте и убирайте элементы, чтобы проверить перенос, а затем скопируйте сгенерированный CSS для контейнера. Для двумерных раскладок, где строки и столбцы должны совпадать, обычно лучше подходит CSS Grid.