Это очень важный момент в вёрстке на flexbox и он никак не отменяет того, что эту разницу нужно знать, понимать и грамотно применять.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
Пока что это самый популярный вопрос который меня спрашивали. На самом деле я и сам гуглил про эту штуку в начале понимания флексов. Там были такой запрос “flex-basis vs width vs min-width” и так 4 раза! Не хило. Но давайте разберемся с этим вопросом и возможно избавим вас от подобным запросов в будущем.
Для определения размера 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-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 пикселей. Уже потом будут применяться правила роста и сжатия.
У флекс-элементов размеры по основной и поперечной осям более приоритетны чем ширина ( width ) и высота ( height ). Это связано с идеей гибкости структуры, лежащей в основе модели флексбоксов.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px .
А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.
Если никакие размеры не заданы, а свойству flex — basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Значение flex — basis более приоритетно, чем значения свойств width или height (в зависимости от направления основной оси).
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
Chrome 59, поддерживается 59
Edge 79, поддерживается 79
Firefox 81, поддерживается 81
Safari 11, поддерживается 11
flex-basis
Свойство flex-basis определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width и height , к которым добавляется содержимое элемента.
Краткая информация
Значение по умолчанию
auto
Наследуется
Нет
Применяется
К флекс-элементам
Анимируется
Да
Синтаксис
flex-basis: auto |
Описание
Пример
Указывает тип значения.
A && B
Значения должны выводиться в указанном порядке.
&&
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,]*
+
Повторять один или больше раз.
+
?
Указанный тип, слово или группа не является обязательным.
inset?
Повторять не менее A, но не более B раз.
#
Повторять один или больше раз через запятую.
#
Значения
auto Указывает автоматический размер, основанный на содержимом элемента. <размер>Задаёт размер элемента в px, mm, pt или в процентах вдоль главной оси. При этом размер вычисляется относительно родителя. Отрицательное значение недопустимо.
Пример
flex-basis
Первый
Второй
Третий
Примечание
Safari до версии 9 поддерживает свойство -webkit-flex-basis .
Спецификация
Спецификация
Статус
CSS Flexible Box Layout Module Level 1
Возможная рекомендация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
11
13
29
12.1
6.1
9
28
4.4
28
12.1
7.1
9.2
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Адаптивный макет на флексбоксах
Макет сайта на флексбоксах
Свойства flex-элементов
Справочник CSS
!important
::after
::backdrop
::before
::first-letter
::first-line
::marker
::placeholder
::selection
:active
:blank
:buffering
:checked
:default
:dir
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-within
:fullscreen
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:muted
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:paused
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:seeking
:stalled
:target
:valid
:visited
:volume-locked
@charset
@document
@font-face
@import
@keyframes
@media
@page
@supports
@viewport
accent-color
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
aspect-ratio
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-kerning
font-size
font-stretch
font-style
font-variant
font-weight
gap
height
hyphenate-character
hyphenate-limit-chars
hyphens
image-rendering
justify-content
left
letter-spacing
line-clamp
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
marks
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
place-content
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip-ink
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-fill-color
text-indent
text-orientation
text-overflow
text-shadow
text-stroke
text-stroke-color
text-stroke-width
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom
Управление элементами. 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-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать
числовое значение : мы можем установить конкретное числовое значение для размеров элемента
У первого элемента у свойства flex-basis установлено значение auto . Поэтому первый элемент в качестве реального значения для ширины будет использовать значение свойства width .
У второго элемента у свойства flex-basis установлено значение auto , однако и свойство width имеет значение auto . Поэтому реальная ширина элемента будет устанавливаться по его содержимому.
У третьего элемента свойство flex-basis имеет конкретное значение, которое и используется. А свойство width в этом случае уже не играет никакой роли.
flex-shrink¶
Если flex-контейнер имеет недостаточно места для размещения элемента, то дальнейшее поведение этого элемента мы можем определить с помощью свойства flex-shrink . Оно указывает, как элемент будет усекаться относительно других элементов.
В качестве значения свойство принимает число. По умолчанию его значение 1 .
В данном случае начальная ширина каждого элемента равна 200px , то есть совокупная ширина составляет 600px . Однако ширина flex-контейнера составляет всего 400px . То есть размер контейнера недостаточен для вмещения в него элементов, поэтому в действие вступает свойство flex-shrink , которое определено у элементов.
Для усечения элементов браузер вычисляет коэффициент усечения (shrinkage factor). Он вычисляется путем перемножения значения свойства flex-basis на flex-shrink . Таким образом, для трех элементов мы получим следующие вычисления:
123456
// первый элемент 200px * 1 = 200 // второй элемент 200px * 2 = 400 // третий элемент 200px * 3 = 600
Таким образом, мы получаем, что для второго элемента коэффициент усечения в два раза больше, чем коэффициент для первого элемента. А для третьего элемента коэффициент больше в три раза, чем у первого элемента. Поэтому в итоге первый элемент при усечении будет в три раза больше, чем третий и в два раза больше, чем второй.
flex-grow¶
Свойство flex-grow управляет расширением элементов, если во flex-контейнере есть дополнительное место. Данное свойство во многом похоже на свойство flex-shrink за тем исключением, что работает в сторону увеличения элементов.
В качестве значения свойство flex-grow принимает положительное число, которое указывает, во сколько раз элемент будет увеличиваться относительно других элементов при увеличении размеров flex-контейнера. По умолчанию свойство flex-grow равно 0 .
Итак, для каждого элемента есть базовые начальные размеры. Здесь явным образом размеры для элементов не указаны, поэтому размер каждого элемента в данном случае будет складываться из размеров внутреннего содержимого, к которым добавляются внутренние отступы.
По мере растягивания контейнера будут увеличиваться элементы в соответствии со свойством 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-элемент не растягивается и не усекается при увеличении и уменьшении контейнера
Здесь каждый элемент имеет начальную ширину в 150 пикселей, так как у всех элементов свойство flex-basis имеет значение 0 , что в целом для всех элементов будет составлять 600 пикселей.
При сжатии контейнера будут уменьшаться 3-й и 4-й элементы, так как у них свойство flex-shrink больше нуля. И так как у обоих элементов это свойство равно 1 , то оба элемента будут уменьшаться в равных долях.
При растяжении контейнера будут увеличиваться 2-й и 4-й элементы, так как у этих элементов свойство flex-grow больше нуля. И также, так как это свойство равно 1 , то эти элементы будут увеличиваться в равных долях.
