Flex-контейнер

В прошлом уроке вы увидели, как браузер размещает элементы в обычном потоке: блочные элементы выстраиваются сверху вниз, а строчные идут друг за другом, как слова в предложении. Но на веб-страницах полно блоков, стоящих рядом: панели навигации, ряды карточек, логотип слева и ссылки справа. Для такой раскладки в CSS есть специальный инструмент: flexbox (от англ. flexible box layout — «гибкая раскладка блоков»).

Для этого урока мы расширили нашу страницу про кошек: сверху появилась панель навигации с логотипом и ссылками на разделы, в шапке — подзаголовок, а список пород превратился в четыре карточки. Пока всё идёт одно под другим. Чтобы увидеть карточки, прокрутите страницу в окне предпросмотра вниз. В этом уроке мы будем раскладывать страницу с помощью flexbox.

Flexbox включается объявлением display: flex у родителя тех элементов, которые мы хотим разложить:

.container {
	display: flex;
}

Элемент с display: flex становится flex-контейнером, а его дочерние элементы — flex-элементами. Они выстраиваются рядом друг с другом в строку, слева направо. Flex-элементами становятся только прямые потомки контейнера, но не их собственные потомки: содержимое каждого элемента раскладывается по-прежнему.

Flexbox размещает элементы вдоль двух направлений, которые называются осями. Главная ось — это направление, в котором элементы выстраиваются один за другим. В строке она идёт слева направо. Поперечная ось пересекает её под прямым углом, поэтому в строке она идёт сверху вниз. Слева на картинке вы видите строку. Справа — столбец, который вы научитесь делать позже в этом уроке.

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