Расставляйте коробки с помощью Flexbox
Пишете в контейнере display: flex, justify-content и align-items и ставите коробки на место. То, что вы написали, сразу видно вживую.
Задача: Соберите коробки по центру
Посмотрите каждое свойство Flexbox вживую на примере коробок: какие значения принимает свойство и что при этом меняется. Затем переходите к «Практике».
Всё начинается отсюда
Если задать контейнеру display: flex, коробки (flex-элементы) выстроятся в один ряд бок о бок. В обычном состоянии они стояли друг под другом.
.maydon { display: flex; }
Разберитесь в двух осях
Flexbox работает с двумя осями: главная ось (main), то есть направление, вдоль которого выстраиваются коробки (обычно горизонтальное), и поперечная ось (cross), перпендикулярная ей. justify-content размещает вдоль главной оси, align-items — вдоль поперечной.
/* главная ось -> justify-content */ /* поперечная ось v align-items */
Вдоль главной оси
justify-content размещает коробки вдоль главной оси (горизонтальной): flex-start (влево), center (по центру), flex-end (вправо), space-between / space-around / space-evenly (промежутки между ними).
justify-content: center; justify-content: space-between;
Вдоль поперечной оси
align-items размещает коробки вдоль поперечной оси (вертикальной): flex-start (вверх), center (по центру), flex-end (вниз), stretch (растягивает на всю высоту).
align-items: center; align-items: flex-end;
Смена направления
flex-direction задаёт направление главной оси: row (строка, по умолчанию), column (столбец) и их обратные варианты с -reverse. Важно: при column главная ось становится вертикальной!
flex-direction: column; flex-direction: row-reverse;
Промежуток между ними
gap ставит равный промежуток между коробками. Возиться с margin не придётся, хватит одной строки.
gap: 16px;
Не помещается — на следующую строку
По умолчанию коробки сжимаются в одну строку. Если задать flex-wrap: wrap, то, что не помещается, переходит на следующую строку. Так строится адаптивная (responsive) сетка.
flex-wrap: wrap;
Занять свободное место
flex-grow — свойство коробки (элемента). Если значение 1, она расширяется, занимая свободное место. Остальные сохраняют свой размер.
.quti2 { flex-grow: 1; }
Изменение порядка
order — свойство коробки. Оно управляет порядком отображения, не меняя HTML. Меньшее значение стоит впереди, большее — позади (по умолчанию 0).
.quti1 { order: 2; }
Исключение для одной коробки
align-self — свойство коробки. Оно отменяет правило align-items контейнера только для этой коробки. Пригодится, если одну нужно разместить иначе.
.quti2 { align-self: flex-end; }
Готовы? 🎯
Теперь проверьте знания: в практике из 20 уровней вы пишете код и ставите коробки по своим домикам.
Отлично!
Коробки встали на место.