Знакомство с Flexbox для начинающих

В последние годы макет CSS достиг совершеннолетия: специальные инструменты для сложных макетов заменили различные обходные пути использования таблиц, плавающего, абсолютного позиционирования и так далее. Flexbox (или модуль Flex Box Layout) был первым из этих выделенных модулей макета, а затем CSS Grid Layout . В этой статье мы предоставляем удобное введение в flexbox.

С введением CSS Grid Layouts вы можете спросить, нужен ли вообще flexbox. Несмотря на то, что они могут частично совпадать, у каждого из них есть свои особые цели и роли в макете CSS. Как правило, самое приятное место для flexbox — это макет в одном измерении (скажем, строка похожих элементов), тогда как Grid идеально подходит для макета в двух измерениях (например, элементов целой страницы).

Тем не менее, flexbox может использоваться для полностраничных макетов и, таким образом, предоставляет удобный запасной вариант для макетов Grid в браузерах, которые еще не поддерживают Grid. (Следует признать, что поддержка Grid быстро распространилась в большинстве современных браузеров , но поддержка flexbox все еще шире, что удобно, если вам нужны макеты для работы в некоторых более старых браузерах.)

Преимущества использования Flexbox

Некоторые из преимуществ flexbox:

• содержимое страницы может быть выложено в любом направлении (влево, вправо, вниз или даже вверх)
• биты содержимого могут иметь обратный или переставленный визуальный порядок
• элементы могут «изгибать» свои размеры в соответствии с доступным пространством и могут быть выровнены относительно их контейнера или друг друга
• достижение макетов с одинаковыми столбцами (независимо от количества содержимого внутри каждого столбца) — очень просто.

Чтобы проиллюстрировать различные свойства и возможности, давайте предположим следующую простую схему для некоторых демонстраций в этой статье:

<div class="example"> <header> header content here </header> <main class="main"> <nav> nav content here </nav> <div class="content"> main content here </div> <aside> aside content here </aside> </main> <footer> footer content here </footer> </div> 

Первым шагом является размещение элементов внутри .main , то есть <nav> и <aside> , рядом. Без флексбокса мы, вероятно, разместили бы все три элемента, но заставить его работать так, как хотелось бы, было бы не очень просто. Более того, традиционный способ ведения дел представляет собой хорошо известную проблему: каждый столбец так же высок, как и его содержание. Как следствие, вам нужно будет установить одинаковую высоту для всех трех столбцов, чтобы иметь одинаковую длину, или использовать какой-то вид взлома .

Введите flexbox в помощь.

Давайте согнем

Основным элементом flexbox является новое значение flex свойства display , которое необходимо установить для элемента контейнера. Это превращает его детей в «гибкие предметы». Эти предметы приобретают некоторые удобные свойства по умолчанию. Например, они располагаются рядом, а элементы без указанной ширины автоматически занимают оставшееся пространство.

Таким образом, если вы установите display: flex для .main , его дочерний элемент .content автоматически сжимается между <nav> и <aside> . Нет больше расчетов, насколько это удобно? В качестве специального бонуса все эти три элемента магически имеют одинаковую высоту.

 .main { display: flex; } 

Проверьте демо ниже для всех деталей:

 .main { display: flex; } .content { order: -1; } 

 .example { display: flex; flex-direction: column; } footer { order: -1; } 

 .example { display: flex; flex-direction: column; } .red { align-self: center; } .blue { align-self: flex-start; } .pink { align-self: flex-end; } 

 .example { display: flex; align-items: center; } 

 .main { display: flex; justify-content: space-between; } 

 header { height: 100vh; display: flex; justify-content: center; align-items: center; } 

 nav, aside, .content { flex: 1; }