От автора: изменение размеров Flexbox позволяет создавать гибкие макеты, которые полностью адаптируются к экрану. Если вы все настроите правильно, вам не придется полагаться на медиа-запросы для поддержки разных экранов, окон просмотра и ориентаций.
В этом руководстве я покажу вам, как использовать свойства Flexbox для изменения размеров: flex-grow, flex-shrink, flex-basis и flex.
Заполнение свободного пространства
Одним из наиболее сложных аспектов написания CSS является выяснение того, как распределить свободное пространство, которое остается на экране после заполнения страницы контентом. При некоторых размерах окна просмотра вы обнаружите, что места осталось слишком много, и вы хотите заполнить его чем-нибудь. При других размерах окна просмотра вы можете обнаружить, что места недостаточно, и макет так или иначе нарушается.
Свойства размеров Flexbox позволяют принимать решения в трех видах сценариев:
flex-grow: как должны вести себя flex-элементы при избытке свободного пространства (как они должны растягиваться).
flex-shrink: как должны вести себя гибкие элементы при нехватке свободного места (как они должны сжиматься).
flex-basis: как должны вести себя гибкие элементы, когда места ровно столько, сколько нужно.
Поскольку flexbox является одномерным макетом, в отличие от CSS Grid, который является двумерным, вы можете выделить свободное пространство вдоль главной оси (будь то сверху вниз, снизу вверх, слева направо или справа налево) , Вы можете установить направление главной оси, используя свойство flex-direction.
На большинстве сайтов с направлением письма слева направо чаще всего для flex-direction используется row, что означает, что вы можете выделить свободное пространство слева направо. Это также является значением flex-direction по умолчанию, поэтому я буду использовать его в следующих примерах.
1. Положительное свободное пространство: flex-grow
Свойство flex-grow определяет , как должно распределяться дополнительное пространство в промежутке между элементами. Самая важная вещь, которую следует помнить о размерах flexbox, это то, что flex-grow разделяет не весь flex-контейнер, а только пространство, которое остается после того, как браузер отобразит все flex-элементы. Если свободного места нет, flex-grow не дает никакого эффекта.
Давайте начнем со следующего HTML:
<div class="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> </div>
Класс .container будет нашим flex-контейнером (для него определено display: flex;), а элементы .item будут flex-элементами:
.container { background-color: darkslategrey; padding: 1rem; display: flex; flex-direction: row;
}
.item { font-size: 2rem; line-height: 1; text-align: center; width: 3rem; padding: 2rem 1rem; background: #e2f0ef; border: 3px solid #51aaa3; color: #51aaa3; margin: 0.375rem; }
Если мы не укажем браузеру, что делать с оставшимся пространством, вот как flex-элементы будут размещаться на экране:
Браузер использовал значение по умолчанию flex-grow, которое равно 0. Такое расположение может быть хорошим решением для некоторых макетов, однако, вы можете также сделать так, чтобы элементы занимали все пространство, установив для flex-grow — 1:
.item { flex-grow: 1;
}
Как вы можете видеть ниже, flex-элементы растянулись и заполнили все доступное пространство:
В приведенном выше примере все flex-элементы имеют одинаковое значение flex-grow, поэтому они растягиваются одинаково. Тем не менее, вы также можете заставить их растягиваться в различных соотношениях. Например, .item-1 может занимать вдвое больше доступного пространства, чем другие элементы. Мы зададим это следующим образом:
.item { flex-grow: 1; }
.item-1 { flex-grow: 2;
}
Точно также вы можете установить разные значения flex-grow для каждого flex-элемента, чтобы они по разному растягивались относительно друг друга. Поэкспериментируйте со значениями в этом примере и посмотрите, как они влияют на макет:
2. Отрицательное свободное пространство: flex-shrink
Свойство flex-shrink противоположно flex-grow. Оно определяет, как должны вести себя flex-элементы, когда на экране недостаточно места. Это происходит, когда размер flex-элементов больше, чем размер flex-контейнера.
Без flex-shrink следующий CSS даст макет, в котором элементы переполняют контейнер, так как общая ширина элементов (3 * 10rem) больше, чем ширина контейнера (20rem).
.container { width: 20rem; padding: 1rem; background-color: darkslategrey; display: flex; flex-direction: row;
}
.item { width: 10rem; padding: 2rem 1rem; font-size: 2rem; line-height: 1; text-align: center; background: #e2f0ef; border: 3px solid #51aaa3; color: #51aaa3; margin: 0.375rem; }
Гипотетический случай без flex-shrink.
К счастью для нас, flex-shrink подразумевается по умолчанию, принимая значение 1, что дает нам макет, в котором элементы помещаются в контейнер, даже если им не хватает места:
Когда flex-shrink равно 1, flex-элементы полностью гибкие, а когда не хватает места, они сжимаются вместе с flex-контейнером.
Следуя той же логике, вы можете сделать гибкие элементы полностью негибкими, когда на экране есть отрицательное пространство. Вам нужно только установить для flex-shrink значение 0 и элементы будут переполнять flex-контейнер:
.item { flex-shrink: 0;
}
Аналогично flex-grow, вы также можете установить разные значения flex-shrink для каждого из flex-элементов, чтобы они могли уменьшаться относительно друг друга. Поэкспериментируйте со значениями в этом примере и посмотрите, как они влияют на макет:
Тестируя вышеприведенное демо вы могли заметить , что большие значения flex-shrink дают более узкие гибким flex-элементы. Например, следующий CSS дает макет, в котором .item-3 — это самый узкий элемент:
.item-1 { flex-shrink: 1;
}
.item-2 { flex-shrink: 1;
}
.item-3 { flex-shrink: 2;
}
Это потому, что flex-shrink определяет, насколько элемент должен сжиматься по сравнению с другими элементами. Таким образом, большие значения flex-shrink дают меньшие элементы, что может сбивать с толку!
3. Нет свободного места: flex-base
Последний сценарий выделения свободного места — это когда на экране столько места, сколько вам нужно. Тогда flex-элементы примут значение flex-basis.
Свойство flex-basis определяет начальный размер гибких элементов. Значение по умолчанию flex-basis- auto, это означает, что размер flex-элементов рассчитывается с использованием либо элемента width, либо элемента height (в зависимости от того, определяется ли макет на основе строк или столбцов).
Однако когда значение flex-basis отличается от значения auto, оно переопределяет значение width (или height в случае вертикальных макетов). Например, следующий CSS переопределяет правило по умолчанию width: 20rem; соответствующим значением для каждого flex-элемента:
.item { width: 20rem; padding: 2rem 1rem; font-size: 2rem; line-height: 1; text-align: center; background: #e2f0ef; border: 3px solid #51aaa3; color: #51aaa3; margin: 0.375rem; }
.item-1 { flex-basis: 5rem;
}
.item-2 { flex-basis: 10rem;
}
.item-3 { flex-basis: 30rem;
}
Помимо единиц длины, процентов и auto, вы также можете использовать в качестве значения для flex-basis ключевое слово content. Это сделает элемент таким же широким, как и контент, который он содержит.
Так как flex-basis определяет начальное значение flex-элементов, это база, которую браузер использует для вычисления flex-grow и flex-shrink. Обратите внимание , что в то время как flex-grow и flex-shrink имеют относительные значения ( 0, 1, 2, и т.д.), flex-basis всегда принимает абсолютное значение ( px, rem, content и т.д.).
Сокращения Flex
Свойства размеров Flexbox также называются сокращенно flex. Свойство flex сокращает flex-grow, flex-shrinkи flex-basis следующим образом:
/* Несокращенная форма значений по умолчанию */
.item { flex-grow: 0; flex-shrink: 1; flex-basis: auto;
} /* Сокращенная форма значений по умолчанию */
.item { flex: 0 1 auto;
}
Вам не обязательно перечислять все три значения. Вы можете использовать одно или два значения flex в соответствии со следующими правилами и предположениями:
/* Одно относительное значение: flex-grow */ flex: 1; /* Одно абсолютное значение: flex-basis */ flex: 20rem; flex: 50px; /* Одно относительное значение и одно абсолютное значение: flex-grow | flex-basis */ flex: 1 20rem; /* Два относительных значения: flex-grow | flex-shrink */ flex: 1 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 1 2 20rem; /* Полностью негибкий макет: эквивалентно: 0 0 auto */ flex: none;
Может потребоваться некоторое время, чтобы привыкнуть к сокращению flex , но документация W3C фактически рекомендует использовать его вместо записи отдельных свойств: «Авторам рекомендуется контролировать гибкость, используя сокращенную запись flex, а не напрямую с помощью полных свойств, так как сокращение корректно сбрасывает любые неуказанные компоненты для реализации общего использования».
Заключение
Вот и все: вы можете полностью контролировать гибкость с помощью свойств flexbox! В этом руководстве я использовал горизонтальное расположение, установленное flex-direction: row, таким образом распределение пространства происходило по горизонтали (слева направо) и flex-grow, flex-shrink и flex-basis модифицировал ширину flex-элементов.
Если вы примените то, что мы рассмотрели, и к вертикальному макету, установленному с помощью flex-direction: column, модификация будет выполняться вдоль вертикальной (сверху вниз) оси, и свойства размеров будут изменять высоту flex-элементов.
Автор: Anna Monus
Источник: https://webdesign.tutsplus.com/
Редакция: Команда webformyself.
