Как создавать смарт-макеты только на CSS с помощью Flexbox

Гибкий блок, или сокращенно Flexbox, представляет собой набор свойств в CSS, представленный в 2009 году для обеспечения новой исключительной системы компоновки. Модуль Flexbox идентифицируется как часть третьей версии CSS (CSS3).

Вероятно, вы уже используете многие новые свойства CSS3, такие как box-shadow , border-radius , фоновые градиенты и так далее. Однако Flexbox еще не получил широкого распространения, которого он заслуживает. Это может быть из-за всех критических изменений, которые он претерпел за эти годы, или из-за того, что он лишь частично поддерживается в Internet Explorer 10, или просто потому, что Flexbox представляет собой целую экосистему, в то время как предыдущие парадигмы были преимущественно основаны на едином, готовом к использованию. перейти свойства.

Он очень мощный и предлагает широкий спектр возможностей для создания макетов, о которых раньше можно было только мечтать.

Эта статья расскажет вам об основах Flexbox и о том, как вы можете использовать его для создания действительно крутых макетов, которые в противном случае потребовали бы сложных приемов CSS или даже JavaScript.

Зачем использовать Flexbox?

По умолчанию HTML-элементы блочного уровня складываются, поэтому, если вы хотите выровнять их в ряд, вам нужно полагаться на свойства CSS, такие как float , или манипулировать свойством display с помощью табличных или встроенных блочных настроек.

Если вы решите использовать float (влево или вправо), вы должны в какой-то момент очистить оболочку, чтобы протолкнуть ее до самого последнего элемента с плавающей запятой, иначе они переполнятся всем, что последует. Однако с float вы ограничены горизонтальной организацией элементов.

В качестве альтернативы или в дополнение вы можете манипулировать свойством display , чтобы попытаться добиться желаемого макета! Но это часто кажется в лучшем случае неуклюжим, не говоря уже об утомительном, и часто приводит к довольно хрупкому макету, который не обязательно будет отображаться последовательно в разных браузерах. Этот подход особенно неэффективен, если вы нацелены на несколько устройств разного размера, что почти всегда имеет место в настоящее время.

Введите Flexbox!

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

С Flexbox вы можете:

• Измените порядок элементов внутри родителя Flexbox.
• Оберните дочерние элементы в столбцы (количество столбцов может варьироваться в зависимости от высоты дочернего и родительского элементов).
• Укажите скорость, с которой элементы увеличиваются или уменьшаются при изменении размера окна просмотра.
• Контролируйте, могут ли элементы уменьшаться или нет, независимо от указанного типа единицы ширины (относительной или абсолютной).
• Измените порядок элементов с помощью CSS (сочетайте это с медиа-запросами, и вы найдете безграничные возможности в своем потоке).
• Создавайте сложные распределения элементов, чтобы они были равноудалены с пространством вокруг или только с пространством между ними.
• Создавайте «отступнические» элементы, которые текут по-разному (все слева, кроме одного справа, сверху/снизу… решать вам).
• И, самое главное, навсегда избегайте взлома Clear-Fix!

Я понимаю, что Flexbox может быть сложным в начале. Я думаю, что легче выучить десять несвязанных свойств CSS, чем пять с некоторой взаимозависимостью. Тем не менее, с вашими текущими навыками CSS и, возможно, с небольшой помощью из этой статьи, вы отправитесь в новую вселенную CSS.

Основы Flexbox

Отображать

display — одно из самых основных свойств в CSS и очень важное в контексте Flexbox, поскольку оно используется для определения оболочки flex.

Есть два возможных значения обертки flex: flex и inline-flex .

Разница между ними заключается в том, что оболочка display: flex действует как блочный элемент, а оболочка display: inline-flex действует как встроенный блок. Кроме того, элементы inline-flex увеличиваются, если для размещения дочерних элементов недостаточно места. Но если не считать этих различий, поведение этих двоих будет одинаковым.

Попробуйте пример кода ниже, уменьшите ширину области просмотра, когда активен inline-flex и… прокрутите.

См. свойство Pen Flexbox @Toptal — Parent — `display` от DD (@Diegue) на CodePen.

 .wrapper { display: flex || inline-flex; }

Гибкое направление

Теперь, когда вы видели первый пример, вы можете сделать вывод, что поведение по умолчанию — просто создать строку элементов. Но есть еще:

• row (по умолчанию): упорядочивает элементы слева направо (но если установлено RTL, это будет наоборот).
• row-reverse: меняет порядок элементов в расположении строки на противоположный
• столбец: упорядочивает элементы сверху вниз
• column-reverse: меняет порядок элементов в расположении столбца на противоположный.

Подсказка: значения column и column-reverse можно использовать для переключения осей местами, поэтому свойства, влияющие на горизонтальную ось, будут воздействовать вместо этого на вертикальную ось.

См. свойство Pen Flexbox @Toptal — Parent — `flex-direction` от DD (@Diegue) на CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Гибкая обертка

Если вы проверите первый пример кода, вы обнаружите, что дочерние элементы не складываются по умолчанию в оболочке flex. Здесь в игру вступает flex-wrap :

• nowrap (по умолчанию): предотвращает перенос элементов в контейнере flex.
• wrap: Оборачивает элементы по мере необходимости в несколько строк (или столбцов, в зависимости от flex-direction ).
• wrap-reverse: то же, что и wrap , но количество строк (или столбцов) растет в противоположном направлении по мере переноса элементов.

См. свойство Pen Flexbox @Toptal — Parent — `flex-wrap` от DD (@Diegue) на CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Гибкий поток

Вы можете объединить свойства flex-direction и flex-wrap в одно свойство: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Выровнять содержание

Это свойство используется для управления горизонтальным выравниванием дочерних элементов:

• flex-start (по умолчанию): элементы выравниваются по левому краю (аналогично встроенным элементам с text-align: left )
• flex-end: элементы выравниваются по правому краю (аналогично встроенным элементам с text-align: right )
• center: элементы располагаются по центру (аналогично строчным элементам с text-align: center )
• space-around (где начинается волшебство): каждый элемент будет отображаться с одинаковым пространством вокруг каждого элемента. Обратите внимание, что расстояние между двумя последовательными дочерними элементами будет вдвое больше, чем расстояние между самыми внешними элементами и сторонами оболочки.
• space-between: точно так же, как space-around , за исключением того, что элементы будут разделены одинаковым расстоянием и не будет пробела ни у одного из краев обертки.

Примечание: помните, что flex-direction , когда установлено значение column или column-reverse , меняет местами ось. Если один из них установлен, justify-content будет влиять на выравнивание по вертикали, а не по горизонтали.

См. свойство Pen Flexbox @Toptal — Parent — `justify-content` от DD (@Diegue) на CodePen.

Выровнять элементы

Это свойство похоже на justify-content но контекстом его эффектов являются строки, а не сама оболочка:

• flex-start: элементы выравниваются по вертикали по верхней части оболочки.
• flex-end: элементы выравниваются по вертикали по нижней части оболочки.
• center: элементы центрируются вертикально внутри оболочки (наконец-то это безопасная практика для достижения этого).
• растягивание (по умолчанию): заставляет элементы занимать всю высоту (при применении к строке) и всю ширину (при применении к столбцу) оболочки.
• baseline: Вертикально выравнивает элементы по их фактическим базовым линиям.

См. свойство Pen Flexbox @Toptal — Parent — `align-items` от DD (@Diegue) на CodePen.

Выровнять содержимое

Это свойство похоже на свойства justify-content и align-items но оно работает с вертикальной осью, а контекст представляет собой всю оболочку (а не строку, как в предыдущем примере). Чтобы увидеть его эффекты, вам понадобится более одной строки:

• flex-start: строки выравниваются по вертикали вверх (т. е. располагаются стопкой сверху обертки).
• flex-end: строки выравниваются по вертикали по низу (т. е. укладываются в стопку снизу обертки).
• center: строки располагаются в обертке по центру по вертикали.
• stretch (по умолчанию): В общем, это свойство растягивает элементы, чтобы использовать всю вертикальную высоту оболочки. Однако, если вы установили определенную высоту элементов, эта высота будет учитываться, а оставшееся пространство по вертикали (в этой строке под этим элементом) будет пустым.
• space-around: каждая строка будет отображаться с одинаковым пространством вокруг себя по вертикали (т. е. ниже и выше самой себя). Обратите внимание, что расстояние между двумя строками, таким образом, будет в два раза больше, чем расстояние между верхней и нижней строками и краями обертки.
• space-between: точно так же, как space-around , за исключением того, что элементы будут разделены одинаковым расстоянием, и не будет места на верхнем и нижнем краях обертки.

См. свойство Pen Flexbox @Toptal — Parent — `align-content` от DD (@Diegue) на CodePen.

Флекс Расти

Это свойство устанавливает относительную долю доступного пространства, которое должен использовать элемент. Значение должно быть целым числом, где 0 — значение по умолчанию.

Допустим, у вас есть два разных элемента в одной и той же гибкой оболочке. Если оба имеют значение flex-grow , равное 1, они будут расти одинаково, чтобы разделить доступное пространство. Но если у одного значение flex-grow равно 1, а у другого значение flex-grow равно 2, как показано в примере ниже, этот со значением flex-grow 2 будет увеличиваться и занимать в два раза больше места, чем первый.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

См. свойство Pen Flexbox @Toptal — Children — `flex-grow` от DD (@Diegue) на CodePen.

Гибкая термоусадка

Подобно flex-grow , это свойство устанавливает, является ли элемент «сжимаемым» или нет, с целочисленным значением. Подобно flex-grow , flex-shrink определяет коэффициент сжатия flex-элемента.

См. свойство Pen Flexbox @Toptal — Children — `flex-shrink` от DD (@Diegue) на CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Гибкая основа

Это свойство используется для определения начального размера элемента перед распределением доступного пространства и соответствующей корректировкой элементов.

Подсказка: flex-basis не поддерживает calc() и box-sizing: border-box в каждом браузере, поэтому я рекомендую использовать width , если вам нужно использовать один из них (обратите внимание, что вам также нужно будет установить flex-basis: auto; ).

См. свойство Pen Flexbox @Toptal — Children — `flex-basis` от DD (@Diegue) на CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

гибкий

Вы можете объединить свойства flex-grow , flex-shrink и flex-basis в одно свойство: flex следующим образом:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Подсказка: если вы планируете использовать flex , убедитесь, что вы определили каждое отдельное значение (даже если вы хотите использовать значения по умолчанию), потому что некоторые браузеры могут их не распознать (распространенная ошибка связана с отсутствием определения значения flex-grow ).

Выровнять себя

Это свойство похоже на align-items но эффект применяется индивидуально к каждому элементу. Возможные значения:

• flex-start: Вертикально выравнивает элемент по верхней части оболочки.
• flex-end: Вертикально выравнивает элемент по нижней части оболочки.
• center: Вертикально центрирует элемент внутри оболочки (наконец-то простой способ добиться этого!).
• stretch (по умолчанию): растягивает элемент так, чтобы он занимал всю высоту оболочки (при применении к строке) или всю ширину оболочки (при применении к столбцу).
• baseline: выравнивает элементы в соответствии с их фактическими базовыми линиями.

См. свойство Pen Flexbox @Toptal — Children — `align-self` от DD (@Diegue) на CodePen.

Заказ

Одна из лучших вещей, включенных в Flexbox, — это возможность переупорядочивать элементы (используя свойство order ) без необходимости изменять DOM или использовать JavaScript. Способ работы свойства order очень прост. Во многом так же, как z-index управляет порядком отображения элементов, order определяет порядок расположения элементов внутри оболочки; то есть элементы с более низким значением order (которое, кстати, может быть даже отрицательным) располагаются перед элементами с более высоким значением order .

См. свойство Pen Flexbox @Toptal — Children — `order` от DD (@Diegue) на CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Собираем все вместе: примеры использования Flexbox

Когда дело доходит до разработки макетов, Flexbox открывает целый мир возможностей. Ниже вы можете найти несколько примеров использования свойств Flexbox.

Компонент вертикального выравнивания

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

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

См. Pen Flexbox @Toptal — Реальное использование, которое мы можем дать — Вертикальное выравнивание от DD (@Diegue) на CodePen.

Половина/половина макета

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

Используя более традиционные методы, вы можете создать этот макет с плавающими элементами (шириной 50% каждый), очистив плавающие элементы в обертке («clearfix» :before и :after , overflow: hidden или дурацкий <div> с clear: both; в конце). Тем не менее, это большая работа, и результат не так стабилен, как то, что дает Flexbox.

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

Внешняя обертка:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Внутренние обертки:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

См. раздел Pen Flexbox @Toptal — Реальное использование, которое мы можем дать — Half-bleed от DD (@Diegue) на CodePen.

Полноразмерные кнопки навигации

Полноразмерная панель навигации равномерно распределяет пространство в одной и той же строке элементов панели навигации независимо от количества элементов.

В приведенном ниже примере также есть некоторые пиктограммы без такого поведения, демонстрирующие, что вы можете комбинировать их по своему усмотрению. Без Flexbox для создания такого рода макетов потребовался бы код JavaScript для вычисления доступного пространства, а затем его программного распределения в зависимости от того, какие кнопки охватывают, а какие нет.

Flexbox делает это намного проще.

Свойства обертки:

 .navbar { display: flex; }

Охватывающие дочерние свойства:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Неохватывающие дочерние свойства:

 .navbar-other { flex-grow: 0; // They won't grow } 

См. Pen Flexbox @Toptal - Реальные применения, которые мы можем дать - Навигационная панель с кнопками без полей от DD (@Diegue) на CodePen.

Рекламные объявления

Сколько раз вам приходилось реализовывать набор информационных блоков с иконками и текстом в разных проектах?

Такое распределение элементов в основном полезно в цифровом маркетинге, но может иметь и другое применение в разработке программного обеспечения. Благодаря возможностям Flexbox вы можете установить своего рода сетку, а также выровнять элементы независимо от их количества.

Свойства обертки:

 .wrapper { display: flex; flex-wrap: wrap; }

Дочерние свойства:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Для планшетов и мобильных устройств ширина варьируется от 50% до 100%.

См. Pen Flexbox @Toptal — Реальное использование, которое мы можем дать — Рекламные проспекты от DD (@Diegue) на CodePen.

Улучшение кроссбраузерной совместимости

Синтаксис Flexbox менялся много раз в разных версиях браузеров. Это может быть проблемой при реализации макета с помощью Flexbox и попытке поддерживать старые веб-браузеры, особенно старые версии Internet Explorer.

К счастью, многие методы и обходные пути, позволяющие заставить ваш код работать в самом широком диапазоне веб-браузеров, перечислены в Flexbugs, который является отличным ресурсом. Если вы будете следовать информации на этом сайте, вы получите лучшие и согласованные результаты в разных веб-браузерах.

Префиксные задачи особенно полезны в этом отношении. Чтобы автоматизировать префикс правил CSS, вы можете выбрать один из следующих инструментов:

Рубин:

• Автопрефиксер Rails
• Автопрефиксер посредника

Node.js:

• PostCSS Autoprefixer
• Автопрефиксатор Grunt
• Автопрефиксер Gulp

Начните создавать умные макеты

Flexbox — отличный инструмент для ускорения, полировки и масштабирования нашей работы. Предел только в воображении разработчика.

Если вам нужна визуальная помощь для планирования вашего следующего макета, вы можете попробовать эту аккуратную игровую площадку:

См. Pen Flexbox @Toptal — игровую площадку Flexbox от DD (@Diegue) на CodePen.

Откройте его в новом окне.

Благодаря растущему использованию современных веб-браузеров большинством пользователей использование Flexbox позволит вам легко создавать удивительные макеты без необходимости вникать в беспорядочный код JavaScript или создавать неуклюжие CSS.