Итоги

В этом уроке мы научились раскладывать элементы с помощью flexbox и узнали, что:

• Объявление display: flex делает элемент flex-контейнером, а его дочерние элементы — flex-элементами.
• Flex-элементы располагаются один за другим вдоль главной оси. Поперечная ось перпендикулярна ей.
• flex-direction задаёт направление главной оси: row (строка, по умолчанию), column (столбец), row-reverse или column-reverse.
• justify-content распределяет элементы вдоль главной оси: flex-start (по умолчанию), center, flex-end, space-between, space-around или space-evenly.
• align-items размещает элементы на поперечной оси: stretch (по умолчанию), flex-start, center или flex-end.
• Чтобы поставить что-то по центру в обоих направлениях, дайте его родителю display: flex, justify-content: center и align-items: center.
• gap задаёт промежутки между flex-элементами: только между ними, но не по краям.
• Flex-элементы остаются на одной линии, а когда не помещаются, сжимаются. С flex-wrap: wrap они вместо этого переносятся на следующую линию.
• flex-grow у flex-элемента говорит, какую часть свободного места он получит. flex: 1 тоже заставляет элемент расти, но от начального размера, равного нулю, а не от его ширины.

Flexbox раскладывает элементы в одном направлении: в строку или в столбец. Дальше — последний небольшой проект: страница с ценами, которую вы разложите с помощью flexbox и позиционирования самостоятельно. А потом в уроке «CSS Grid» вы научитесь раскладывать элементы сразу по строкам и столбцам.