Разница между width и flex-basis
Это очень важный момент в вёрстке на flexbox и он никак не отменяет того, что эту разницу нужно знать, понимать и грамотно применять.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
Пока что это самый популярный вопрос который меня спрашивали. На самом деле я и сам гуглил про эту штуку в начале понимания флексов. Там были такой запрос “flex-basis vs width vs min-width” и так 4 раза! Не хило. Но давайте разберемся с этим вопросом и возможно избавим вас от подобным запросов в будущем.
Формула flex-элементов
content → width → flex-basis (ограниченный max|min-width)
Для определения размера flex-элемента, flex-basis ограничивается min-width и max-width . В общем, это всё что нужно.
Обратите внимание, что спека flexbox говорит о том, что это “потенциальный основной размер”, но куда проще рассматривать это как конечный flex-basis .
Если flex-basis не указан, то он опирается на свойство width этого же элемента.
А если уже и width не указан, то flex-basis опирается ширину, посчитанную по контенту.
Давайте покажем как работает эта формула, вставив несколько flex-элементов во flex-контейнер шириной 1000px:
container display: flex;
width: 1000px;
>
Выставляем width
Давайте положим несколько 200px x 200px элементов, которые задают ширину нашему flex-контейнеру.
item width: 200px;
height: 200px;
>
У нашего flex-контейнера есть ещё немного места. Так что всё в него успешно помещается:
В этом примере, flex-basis у элементов не был указан, так что по-дефолту он стоит flex-basis: auto , что берет за основу ширину (200px).
Пока что, указание width равно выставлению flex-basis .
Выставляем flex-basis
Давайте посмотрим что случится, когда мы выставим flex-basis этим элементам, у которых уже указан width .
item width: 30px;
flex-basis: 250px;
>
Как вы видите, когда указан flex-basis , width наших боксов игнорируется, так что нам даже и не нужно его указывать:
item flex-basis: 250px;
>
Наш окончательный flex-basis для каждого элемента равен 250px. И пока у нас достаточно места, чтобы их уместить, они отлично поместятся в flex-контейнере.
Помните формулу flex-элементов:
content → width → flex-basis (ограничивается max|min-width)
Единственное, что реально важно, это конечный flex-basis . Лучшей практикой является использование просто flex-basis , вместо width и height . Особенно учитывая Safari, который до сих пор имеет баг, в котором не применяется flex-shrink на элементах, который используют height вместо flex-basis .
Flex-basis ограниченный max-width
Конечное значение flex-basis ограничено min-width и max-width элемента. Смотрите, что происходит когда мы указываем max-width ограничение нашим flex-элементам:
item flex-basis: 250px;
max-width: 100px;
>
Хоть и flex-basis был выставлен 250px, он превышает указанный лимит max-width лимит в 100px. Так что, нашим окончательным flex-basis, в этом случае будет 100px и наши элементы будут располагаться в контейнере таким образом:
Теперь давайте выставим min-width и посмотрим как оно ограничит наш flex-basis в формировании размера:
item flex-basis: 100px;
min-width: 250px;
>
Хоть мы и указали 100px нашему flex-basis , он не может быть меньше, чем ограничение в 250px, указанное в min-width . Так что, наши элементы идеально поместятся в контейнер:
Так что же такое flex-basis?
Теперь мы понимаем, что width это fallback, когда flex-basis отсутствует, а min-width и max-width это просто ограничения для формирования окончательного размера flex-basis . Но что же такое flex-basis ?
Возможно, вы уже обратили внимание на то, что на всех изображениях, размер элементов указан перед тем как они попадут в контейнер. Мы так сделали, потому что это именно то, чем является flex-basis: размер flex-элементов перед тем, как они разместятся в контейнере. Это идеальный или предположительный размер элементов. Но flex-basis это не гарантированный размер! Как только браузер поместит элементы в контейнер, всё поменяется. На некоторых примерах выше, вы видели то, что flex-элементы идеально подходят под контейнер, потому что общая сумма всех flex-basis равна указанной ширине нашего контейнера (1000px). Хорошо, когда так, но зачастую у flex-контейнера нет достаточного места или у него появляется дополнительное место, после того, как добавятся все значения flex-basis .
Когда недостаточно места
Предположим, что нам надо вставить ещё больше элементов с flex-basis: 200px в наш контейнер:
Перед помещением в контейнер, каждый из них возьмет 200px или 1600px в сумме. Но наш контейнер всего-то 1000px. Когда нет достаточно места для всех элементов с полным flex-basis (каждый по 200px), то они по-дефолту будут урезаны до такого состояния, пока не будут помещаться в контейнер.
Все элементы изначально в ширину 200px, но так как мы сократили пространство, они сократятся до показателя в 125px, то есть так, чтобы они ровно поместились в контейнер. Элементы нарезаются по-дефолтному значению flex-shrink . Вы можете указать своё значение того, как сократятся элементы или вообще убрать эту возможность ( 0 ).
Когда есть лишнее место
Частенько у нас есть лишнее место, после того, как все элементы с flex-basis будут добавлены.
item flex-basis: 100px;
>
Мы можем указать то, как могут расшириться наши элементы, чтобы занять доступное место в flex-контейнере. Это именно то, что делает свойство flex-grow . По-дефолту оно равно 0 , означая то, что элемент не увеличится. Давайте выставим каждому элементу flex-grow: 1 (все они одинаково увеличатся), чтобы заполнить оставшееся место:
item flex-basis: 100px;
flex-grow: 1;
>
Вообще, увеличение и сокращение элементов это значимая часть всей крутости flexbox и это то, что делает его великолепным для адаптивного UI дизайна. Игрушка Flexbox Zombies говорит о этих свойствах довольно детально. Ну а еще детальнее можно прочитать в этих статьях:
Width vs flex-basis
Надеемся, что теперь вы видите разницу между width и flex-basis и то как min-width с max-width влияют на конечный flex-basis . Всё вышеупомянутое может работать как высота height , когда flex-direction выставлен на column или на column-reverse .
Если хотите узнать ещё больше о flexbox, то обязательно прочитайте Вёрстка на Flexbox в CSS. Полный справочник
flex — basis
Свойство flex — basis указывает на размер элемента до того, как свободное место будет распределено (см. flex — grow ).
Пример
Скопировать ссылку «Пример» Скопировано
При отрисовке страницы элементу с классом .item сперва будет задан размер по основной оси в 250 пикселей. Уже потом будут применяться правила роста и сжатия.
.container display: flex;> .item flex-basis: 250px;>.container display: flex; > .item flex-basis: 250px; >
Как понять
Скопировать ссылку «Как понять» Скопировано
У флекс-элементов размеры по основной и поперечной осям более приоритетны чем ширина ( width ) и высота ( height ). Это связано с идеей гибкости структуры, лежащей в основе модели флексбоксов.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px .
А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.
Если никакие размеры не заданы, а свойству flex — basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Значение flex — basis более приоритетно, чем значения свойств width или height (в зависимости от направления основной оси).
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
- Chrome 57, поддерживается 57
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 9, поддерживается 9
flex-basis
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
CSS свойство flex-basis задаёт базовый размер флекс элемента по основной оси. Это свойство определяет размер контент-бокса, если не задано иначе через box-sizing .
Интерактивный пример
Примечание: в случае, если для элемента одновременно заданы flex-basis (отличное от auto ) и width ( или height в случае flex-direction: column ), flex-basis имеет приоритет.
| Начальное значение | auto |
|---|---|
| Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
| Наследуется | нет |
| Проценты | относятся к внутреннему размеру главного flex-контейнера |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | длина, проценты или calc(); |
Синтаксис
/* Устанавливает */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* Intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* Автоматически изменяет размер на основе содержимого элемента */ flex-basis: content; /* Глобальное значения */ flex-basis: inherit; flex-basis: initial; flex-basis: unset;
Свойство flex-basis задаётся через ключевое слово content или через .
Значения
Автоматический задаёт размер на основе содержимого элемента flex.
Примечание: Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя auto вместе с основным размером (width или height) auto .
Примечание:
- Первоначально, flex-basis:auto означает «смотреть на значения width или height «.
- Затем flex-basis:auto был изменён на автоматический размер, а «main-size» было введено как ключевое слово, означающее «смотреть на значения width или height «. Это было реализован в баге 1032922.
- Затем в баге 1093316 это было возвращено обратно, поэтому auto снова означает «смотреть на значения width или height «; а новое ключевое слово content было введено для автоматического размера. (баг 1105111 охватывает добавление этого ключевого слова).
Formal syntax
Example
HTML
ul class="container"> li class="flex flex1">1: flex-basis testli> li class="flex flex2">2: flex-basis testli> li class="flex flex3">3: flex-basis testli> li class="flex flex4">4: flex-basis testli> li class="flex flex5">5: flex-basis testli> ul> ul class="container"> li class="flex flex6">6: flex-basis testli> ul>
CSS
.container font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; > .flex background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 20px; text-align: center; position: relative; > .flex:after position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 18px; > .flex1 flex-basis: auto; > .flex1:after content: "auto"; > .flex2 flex-basis: max-content; > .flex2:after content: "max-content"; > .flex3 flex-basis: min-content; > .flex3:after content: "min-content"; > .flex4 flex-basis: fit-content; > .flex4:after content: "fit-content"; > .flex5 flex-basis: content; > .flex5:after content: "content"; > .flex6 flex-basis: fill; > .flex6:after content: "fill"; >
Results
Specifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-basis-property |
Browser compatibility
BCD tables only load in the browser
Управление элементами. flex-basis, flex-shrink и flex-grow¶
Кроме свойств, устанавливающих выравнивание элементов относительно границ flex-контейнера, есть еще три свойства, которые позволяют управлять элементами:
- flex-basis : определяет начальный размер flex-элемента
- flex-shrink : определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере
- flex-grow : определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере
flex-basis¶
Flex-контейнер может увеличиваться или уменьшаться вдоль своей центральной оси, например, при изменении размеров браузера, если контейнер имеет нефиксированные размеры. И вместе с контейнером также могут увеличиваться и уменьшаться его flex-элементы. Свойство flex-basis определяет начальный размер flex-элемента до того, как он начнет изменять размер, подстраиваясь под размеры flex-контейнера.
Это свойство может принимать следующие значения:
- auto : начальный размер flex-элемента устанавливается автоматически
- content : размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать
- числовое значение : мы можем установить конкретное числовое значение для размеров элемента
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px #ccc solid; > .flex-item text-align: center; font-size: 1em; padding: 1.2em; color: white; > .item1 background-color: #675ba7; flex-basis: auto; width: 150px; > .item2 background-color: #9bc850; flex-basis: auto; width: auto; > .item3 background-color: #a62e5c; flex-basis: 200px; width: 150px; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div> body> html> 
У первого элемента у свойства flex-basis установлено значение auto . Поэтому первый элемент в качестве реального значения для ширины будет использовать значение свойства width .
У второго элемента у свойства flex-basis установлено значение auto , однако и свойство width имеет значение auto . Поэтому реальная ширина элемента будет устанавливаться по его содержимому.
У третьего элемента свойство flex-basis имеет конкретное значение, которое и используется. А свойство width в этом случае уже не играет никакой роли.
flex-shrink¶
Если flex-контейнер имеет недостаточно места для размещения элемента, то дальнейшее поведение этого элемента мы можем определить с помощью свойства flex-shrink . Оно указывает, как элемент будет усекаться относительно других элементов.
В качестве значения свойство принимает число. По умолчанию его значение 1 .
Рассмотрим действие этого свойства на примере:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px #ccc solid; width: 400px; > .flex-item text-align: center; font-size: 1em; padding: 1.2em; color: white; > .item1 background-color: #675ba7; flex-basis: 200px; flex-shrink: 1; > .item2 background-color: #9bc850; flex-basis: 200px; flex-shrink: 2; > .item3 background-color: #a62e5c; flex-basis: 200px; flex-shrink: 3; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div> body> html> 
В данном случае начальная ширина каждого элемента равна 200px , то есть совокупная ширина составляет 600px . Однако ширина flex-контейнера составляет всего 400px . То есть размер контейнера недостаточен для вмещения в него элементов, поэтому в действие вступает свойство flex-shrink , которое определено у элементов.
Для усечения элементов браузер вычисляет коэффициент усечения (shrinkage factor). Он вычисляется путем перемножения значения свойства flex-basis на flex-shrink . Таким образом, для трех элементов мы получим следующие вычисления:
1 2 3 4 5 6
// первый элемент 200px * 1 = 200 // второй элемент 200px * 2 = 400 // третий элемент 200px * 3 = 600 Таким образом, мы получаем, что для второго элемента коэффициент усечения в два раза больше, чем коэффициент для первого элемента. А для третьего элемента коэффициент больше в три раза, чем у первого элемента. Поэтому в итоге первый элемент при усечении будет в три раза больше, чем третий и в два раза больше, чем второй.
flex-grow¶
Свойство flex-grow управляет расширением элементов, если во flex-контейнере есть дополнительное место. Данное свойство во многом похоже на свойство flex-shrink за тем исключением, что работает в сторону увеличения элементов.
В качестве значения свойство flex-grow принимает положительное число, которое указывает, во сколько раз элемент будет увеличиваться относительно других элементов при увеличении размеров flex-контейнера. По умолчанию свойство flex-grow равно 0 .
Итак, используем свойство flex-grow :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px #ccc solid; > .flex-item text-align: center; font-size: 1em; padding: 1.3em; color: white; > .item1 background-color: #675ba7; flex-grow: 0; > .item2 background-color: #9bc850; flex-grow: 1; > .item3 background-color: #a62e5c; flex-grow: 2; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div> body> html> Итак, для каждого элемента есть базовые начальные размеры. Здесь явным образом размеры для элементов не указаны, поэтому размер каждого элемента в данном случае будет складываться из размеров внутреннего содержимого, к которым добавляются внутренние отступы.
По мере растягивания контейнера будут увеличиваться элементы в соответствии со свойством flex-grow , которое указано для каждого элемента. Пространство, на которое растягивается контейнер, считается дополнительным пространством.
Так как у первого элемента свойство flex-grow равно 0 , то первый элемент будет иметь константные постоянные размеры. У второго элемента flex-grow равно 1 , а третьего — 2 . Таким образом, в сумме они дадут 0 + 1 + 2 = 3 . Поэтому второй элемент будет увеличиваться на 1/3 дополнительного пространства, на которое растягивается контейнер, а третий элемент будет получать 2/3 дополнительного пространства.
Свойство flex¶
Свойство flex является объединением свойств flex-basis , flex-shrink и flex-grow и имеет следующий формальный синтаксис:
flex: [flex-grow] [flex-shrink] [flex-basis]; По умолчанию свойство flex имеет значение 0 1 auto .
Кроме конкретных значений для каждого из подсвойств мы можем задать для свойства flex одно из трех общих значений:
- flex: none : эквивалентно значению 0 0 auto , при котором flex-элемент не растягивается и не усекается при увеличении и уменьшении контейнера
- flex: auto : эквивалентно значению 1 1 auto
- flex: initial : эквивалентно значению 0 1 auto
Так, применим свойство flex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px #ccc solid; width: 600px; > .flex-item text-align: center; font-size: 16px; padding: 10px 0; color: white; > .item1 background-color: #675ba7; width: 150px; flex: 0 0 auto; > .item2 background-color: #9bc850; width: 150px; flex: 1 0 auto; > .item3 background-color: #a62e5c; width: 150px; flex: 0 1 auto; > .item4 background-color: #2a9fbc; width: 150px; flex: 1 1 auto; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div class="flex-item item4">Flex Item 4div> div> body> html> 
Здесь каждый элемент имеет начальную ширину в 150 пикселей, так как у всех элементов свойство flex-basis имеет значение 0 , что в целом для всех элементов будет составлять 600 пикселей.
При сжатии контейнера будут уменьшаться 3-й и 4-й элементы, так как у них свойство flex-shrink больше нуля. И так как у обоих элементов это свойство равно 1 , то оба элемента будут уменьшаться в равных долях.
При растяжении контейнера будут увеличиваться 2-й и 4-й элементы, так как у этих элементов свойство flex-grow больше нуля. И также, так как это свойство равно 1 , то эти элементы будут увеличиваться в равных долях.