Помимо свойства flex-grow, которое мы изучили в прошлом уроке, для управления гибкостью элементов внутри флекс-контейнера существует еще два правила: flex-shrink и flex-basis.
Как и в прошлом уроке, для рассмотрения этих правил возьмем три блока и с помощью CodePen узнаем, на что влияют значения правил.
Не забывайте менять значения, чтобы увидеть, как будут меняться элементы.
flex-basis
Свойство flex-basis указывает, какое пространство займет элемент на главной оси по умолчанию.
Может показаться, что flex-basis является заменой width/height, но на самом деле это немного не так. flex-basis может применяться только к элементам внутри флекс-контейнера, а также свойство работает по главной оси. Также, в отличие от свойств width или height, свойство flex-basis устанавливает лишь оптимальную ширину или высоту элемента перед тем, как элемент окажется внутри контейнера.
Для всех элементов внутри контейнера мы установили значение flex-basis: 200px. Так как размер нашего контейнера 600 пикселей, то элементы идеально уместились внутри контейнера.
А что случится, если один из элементов будет иметь такой flex-basis, что суммарная ширина всех элементов превысит ширину флекс-контейнера? Попробуем изменить значение flex-basis для первого элемента внутри контейнера и зададим его в 400 пикселей:
Произошла интересная вещь — блоки автоматически сузились так, чтобы поместиться внутри флекс-контейнера. Причем уменьшился как блок с flex-basis: 400px, так и блоки с flex-basis: 200px. Такое поведение не всегда однозначно, и браузеры автоматически высчитывают, в какой пропорции выдать блокам место внутри флекс-контейнера.
flex-shrink
Еще мы можем контролировать возможность элемента ужиматься в зависимости от размеров флекс-контейнера. В этом помогает свойство flex-shrink. Если свойство flex-grow помогало нам распределить свободное пространство между элементами, то flex-shrink помогает распределить пространство, если места в контейнере недостаточно. По умолчанию все флекс-элементы имеют значение flex-shrink равное единице.
Обратимся снова к прошлому примеру, когда суммарный flex-basis элементов был больше, чем ширина контейнера. Для того, чтобы высчитать, сколько пространства будет срезано с каждого элемента, сначала нужно вычислить суммарную отрицательную ширину. Отрицательная ширина — ширина, которой нам не хватает для того, чтобы расположить все элементы в соответствии с их значениями flex-basis:
Отрицательная ширина = 600 - (400 + 200 + 200) = -200px
Теперь браузеру необходимо компенсировать эту отрицательную ширину за счет сужения всех блоков внутри флекс-контейнера. Для этого высчитывается общий вес всех элементов по формуле значение flex-shrink умноженное на ширину блока. В нашем случае получится следующая формула:
Общий вес = 1 * 400 + 1 * 200 + 1 * 200 = 800.
Теперь, чтобы узнать окончательную ширину каждого элемента в контейнере, нам необходимо:
- Отрицательную ширину умножить на значение flex-shrink.
- Разделить базовую ширину элемента на общий вес.
- Перемножить полученные значения.
Значения для блока 1 будет следующее:
(-200 * 1) * (400 / 800) = -100px. Именно на это значение будет уменьшен блок, если ему не хватает места.
Для двух других блоков можно вычислить значения по этой же формуле и получить -50px.
Значение flex-shrink: 0 запретит блоку сжиматься.
flex
Свойство flex является сокращенной записью всех свойств, рассмотренных в этом и прошлом уроках. Это очень удобная форма записи, которая позволяет в одну строку задать все параметры, что положительно сказывается на чтении стилей. Спецификация также говорит о том, что flex является приоритетной формой записи. Свойства внутри flex записываются в следующем порядке:
- flex-grow
- flex-shrink
- flex-basis
Документация
- flex
- flex-basis
- flex-shrink
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
