Создание гибких макетов с помощью Flexbox

Что если мы хотим, чтобы наш элемент input расширялся, чтобы заполнить доступное пространство в его контейнере? Без Flexbox нам потребовалось бы немного JavaScript и ручной разметки, чтобы обновить ширину input в ответ на изменения ширины его родителя. Однако с Flexbox мы можем просто использовать flex .

Свойство flex самом деле является сокращением для трех других свойств.

• flex-grow указывает, что элемент должен расти при необходимости и должен быть положительным целым числом. Его начальное значение 0 .
• flex-shrink указывает, что элемент должен сжиматься при необходимости и должен быть положительным целым числом. Его начальное значение равно 1 .
• flex-basis: указывает начальную или минимальную ширину (когда ось flex горизонтальна) или высоту элемента (если она вертикальная). Это может быть длина или процент или auto , и его начальное значение — auto .

Хотя можно установить каждый из них по отдельности, в спецификации настоятельно рекомендуется использовать сокращенное обозначение flex . Вот пример:

 div { display: flex; } input[type="text"], button { border: 0; font: inherit; } input[type="text"] { flex: 1 0 auto; } button { background: #003; color: whitesmoke; display: block; text-align: center; flex: 0 0 150px; } 

Здесь мы использовали flex: 1 0 auto для нашего элемента input . Поскольку его значение flex-grow равно 1 , оно будет увеличиваться, чтобы заполнить доступное пространство своего родителя. Однако для элемента button мы использовали flex: 0 0 150px . Значения 0 для flex-grow и flex-shrink предотвращают увеличение или уменьшение ширины кнопки, в то время как значение flex-basis 150px устанавливает ее ширину.

Как вы можете видеть на изображении ниже, наша кнопка остается того же размера, но ширина input увеличивается, чтобы заполнить оставшееся пространство.

Эффект flex: 0 0 150px

Хитрость в значениях flex-grow и flex-shrink заключается в том, что они пропорциональны. Да, flex: 1 0 auto означает, что наш элемент input будет шире, чем наша кнопка. Но изменение значения свойства flex: 1 0 auto нашей кнопки на flex: 1 0 auto не обязательно означает, что оба элемента будут иметь одинаковый размер, как показано на следующем рисунке.

Оба элемента имеют одинаковое значение изгиба, но все еще имеют разные размеры

Вместо этого размеры изгибаемых элементов будут изменены, чтобы заполнить контейнер, принимая во внимание их используемые значения min-width и max-width (которые могут быть их начальными значениями).

К сожалению, мы не можем использовать модули fr со свойствами flex или flex-basis based. Вместо этого используйте значения длины или процента.

Вертикальное центрирование с Flexbox

Наконец, давайте посмотрим, как центрировать содержимое по вертикали с помощью Flexbox. Вертикальное центрирование элементов является одной из наиболее сложных задач, которые можно решить с помощью CSS, особенно если высота вашего контента неизвестна. Но с Flexbox нам требуется всего одна дополнительная строка CSS — align-items: center :

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

Теперь наши flex-элементы и их содержимое вертикально центрированы внутри flex-контейнера, как показано на рисунке ниже.

Распределение гибких предметов с помощью align-items: center

Создание Grid-подобных макетов с помощью Flexbox

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

Сетка в виде сетки с расширяющимися ячейками

Вот разметка, которую мы будем использовать:

 <ul class="flex-aligned"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> </li> 

По умолчанию гибкие элементы не переносятся. Чтобы получить макет выше, нам нужно будет обернуть их, используя свойство flex-wrap . Он принимает три значения: nowrap (начальное значение), wrap и wrap-reverse . Мы будем использовать wrap здесь:

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

Теперь нам просто нужно указать, как должны вести себя наши гибкие элементы и какова их максимальная ширина. Поскольку нам нужно максимум четыре столбца, мы установим наше значение flex-basis based на 25% . И поскольку мы хотим, чтобы наши flex-элементы расширялись, чтобы заполнить доступное пространство, мы установим flex-grow на 1. Мы будем держать flex-shrink на 0, чтобы наши блоки никогда не занимали менее 25% их контейнера:

 .flex-aligned li { flex: 1 0 25%; } 

Узнать больше о Flexbox

Flexbox — это намного больше, чем мы рассмотрели здесь. « Полное руководство по Flexbox » от CSS-Tricks рассматривает все свойства и значения. Вы также можете ознакомиться с « Решением Flexbox » Филиппа Уолтона, в котором демонстрируются шаблоны пользовательского интерфейса, упрощающие работу с Flexbox.

Выбор flex или grid

Разрабатывая макеты страниц или компонентов, вы можете задаться вопросом, когда лучше использовать Flexbox, а когда использовать Grid.

• Используйте Grid, если вы хотите расположить элементы в строки и столбцы, которые выровнены как по горизонтали, так и по вертикали.
• Используйте Flexbox, когда вы хотите расположить элементы в строке или столбце, когда вы хотите выровнять элементы по вертикали или по горизонтали, но не одновременно.

Видео Джен Симмонс « Flexbox vs. CSS Grid — что лучше? ”Проведет вас через некоторые вещи, которые следует учитывать при выборе между Grid и Flexbox. Рейчел Эндрю: « Должен ли я использовать Grid или Flexbox? Это еще один отличный ресурс для понимания того и другого.

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