оригинал:The Difference Between Width and Flex Basis, от gedd.ski
Фотография |GoranH
Многие люди задавали мне этот вопрос, на самом деле, я много раз гуглил его, когда только начинал использовать Flexbox. Глядя на свою историю поиска в Google, я искал что-то вроде «flex-basis vs width vs min-width» четыре раза за последний год. Без дальнейших церемоний! Позвольте мне ответить на этот вопрос сегодня, я надеюсь, что вам не придется искать снова в будущем.
Формула гибкого элемента
Вот формула, которую нужно запомнить:
содержимое -> ширина -> flex-basis (с учетом максимальной | минимальной ширины)
При выборе размера элемента Flex важно помнить, чтоокончательный размер(окончательная гибкая основа) будет подлежатьmin-widthа такжеmax-widthОграничения собственности.
Примечание. Спецификация Flexbox называет это «воображаемым размером шпинделя», но проще понимать его как окончательный размер.
если не указаноflex-basis,flex-basisвернется кwidthАтрибуты. если не указаноwidthАтрибуты,flex-basisВернется к расчетной ширине на основе содержимого элемента Flex.
Чтобы проиллюстрировать эту формулу, давайте проиллюстрируем ее, используя flex-контейнер шириной 1000 пикселей с некоторыми flex-элементами:
container {
display: flex;
width: 1000px;
}
установить ширину
Мы устанавливаем элемент Flex размером 200 пикселей × 200 пикселей.
item {
width: 200px;
height: 200px;
}
Теперь, когда гибкий контейнер достаточно велик, чтобы вместить эти элементы, давайте поместим их внутрь.
В этом примере мы не указали элемент Flexflex-basis(то есть взять по умолчаниюflex-basis: auto), поэтому базовый размер возвращается кwidth(200px).
В это время наборwidthЭквивалентно настройкеflex-basis.
установить гибкую основу
Далее укажем для проекта Flexflex-basis, и посмотрим, что произойдет.
item {
width: 30px;
flex-basis: 250px;
}
можно увидеть, указатьflex-basisназад,widthСвойство игнорируется и больше не имеет никакого эффекта (эквивалентно тому, что оно не задано).
item {
flex-basis: 250px;
}
Окончательный размер каждого элемента250px. Поскольку места в контейнере по-прежнему достаточно, поместить проект в контейнер по-прежнему не проблема.
Помните формулу для элементов Flex:
содержимое -> ширина -> flex-basis (с учетом максимальной | минимальной ширины)
Что нас волнует, так это окончательный размер. Лучшей практикой является использованиеflex-basisвместоwidthилиheight. В частности, в браузере Safari есть старый баг: при использованииheightвместоflex-basisсвойства гибкого элементаfelx-shrinkСвойства не вступят в силу.
flex-basis ограничен max-width
На окончательный размер гибкого элемента влияетmin-widthа такжеmax-widthимущественные эффекты. Ставим на проект Flexmax-widthпосмотри:
item {
flex-basis: 250px;
max-width: 100px;
}
несмотря на то чтоflex-basisуже настроен250px, но достиг100pxизmax-widthпредел. Итак, окончательный размер100px, на этом этапе элемент Flex все еще можно очень хорошо поместить в контейнер Flex:
Теперь давайте установимmin-widthПосмотрите, как это повлияет на окончательный размер:
item {
flex-basis: 100px;
min-width: 250px;
}
Хотя указаноflex-basis: 100px, а потому что нельзя сравнивать250pxизmin-wdithменьше. Итак, окончательный размер250px, элемент Flex помещается прямо во flex-контейнер:
Итак, что такое flex-basis?
Теперь мы знаем, что вflex-basisЕсли не указано,widthего резервная схема,min-widthа такжеmax-widthявляются верхним и нижним пределами конечного размера. Так,flex-basisчто именно?
На изображении выше вы также могли заметить, что поместили в контейнер flexДо, мы визуализируем размер элемента Flex. Это делается для того, чтобы показать, что этоflex-basis:То есть размер flex-элемента перед его помещением в flex-контейнер.(Примечание переводчика: То есть проектmax-contentразмер). Это идеальный или гипотетический размер элемента Flex. но дляflex-basisУказанное значение не обязательно будет окончательным размером элемента Flex! Как только мы поместили элемент Flex в контейнер Flex, все изменилось. В приведенном выше примере размер flex-контейнера в самый раз, поэтому все элементы внутри в порядке, потому что окончательный размер всех элементов в сумме равен ширине flex-контейнера (1000 пикселей). Это нормально, но обычно все проекты Flex имеютfelx-basisПри добавлении flex-контейнера либо нет места, либо нет места, а не просто так.
когда места мало
Предположим, мы положили больше, как в контейнереflex-basis: 200pxс проект:
Перед помещением в контейнер каждый из них занимает200pxразмер, всего1600px. Но наш контейнер имеет только1000pxширина. В результате у нас не хватает места для такого количества flex-элементов, и в результате flex-элементы по умолчанию сжимаются, чтобы соответствовать недостаточному размеру контейнера:
Начальная ширина всех элементов200px, гибкий элемент начинает сжиматься, чтобы соответствовать пространству контейнера (становится каждый125px).flex-shrinkИспользуется для контроля коэффициента усадки. может быть предоставленflex-shrinkУкажите большее или меньшее значение, чтобы контролировать степень усадки, и даже можно установить значение0, что указывает на то, что усадка не допускается.
когда осталось место
Также иногда, когда мы ставим окончательныйflex-basisПосле сложения в контейнере остается место.
item {
flex-basis: 100px;
}
Мы можем указать, что наши flex-элементы растягиваются после помещения в flex-контейнер, чтобы занять оставшееся место, с помощьюflex-growконтролируемое свойство, это свойство по умолчанию равно0, указывая на то, что он не будет растягиваться. В приведенном ниже примере мы настроили для каждого элемента Flexflex-grow: 1(растянуть в той же пропорции), чтобы занять оставшееся место.
item {
flex-basis: 100px;
flex-grow: 1;
}
Увеличение и сжатие — одна из основных особенностей макетов Flexbox, и именно поэтому Flexbox так хорош в адаптивном дизайне пользовательского интерфейса.
width vs flex-basis
теперь можно отличитьwidthа такжеflex-basisХорошо,min-widthа такжеmax-widthбудет ограничивать окончательный размер. и когдаflex-directionдляcolumnилиcolumn-reverse, то естьflex-basisа такжеheightотношение.
(над)