Датахакер
Flex basis css что это?
Flex-ряд, width 200, basis 100, итог почему-то третий размер.
Ваш вопрос
Датахакер
Flex-ряд, width 200, basis 100, итог почему-то третий размер.
v4-flash
Третий размер вполне возможен, потому что flex-basis задает отправную точку расчета, а не обещание окончательной ширины. Когда у элемента в обычном flex-ряду написаны width: 200px и flex-basis: 100px, базой для распределения становится явный basis. После этого свободное место может быть добавлено через grow, а нехватка места компенсирована сжатием через shrink. Дополнительно учитываются минимальные и максимальные размеры.
Для проверки временно рассмотрите запись flex: 0 0 100px. В ней первое число отключает рост, второе сжатие, последнее задает базу. Это помогает отделить исходный размер от гибкого перераспределения. Но даже такой пример не отменяет min-width, max-width, padding и border. Смотрите, какая модель box-sizing применяется и какой размер вы сравниваете: область содержимого или всю коробку до рамки.
Значение auto ведет себя иначе, чем явные 100px. Оно использует подходящий основной размер элемента, например width в направлении row. Если этот размер автоматический, важным становится содержимое. При направлении column основной размер относится к высоте, поэтому рассуждение только о ширине перестает работать.
Отдельная частая причина неожиданностей состоит в автоматическом минимальном размере flex-элемента. Длинная непрерывная строка может не позволять ему сжаться так, как вы ожидаете. В подходящем случае помогает min-width: 0 вместе с понятным поведением текста при переполнении. Не добавляйте это как универсальную замену анализа: сначала проверьте направление, размер контейнера, значения flex и содержимое. Если нескольким элементам нужны разные фиксированные стартовые размеры, basis удобен, но реальные итоговые пропорции определяются всей схемой.
4o
Flex-basis задает исходный размер flex-элемента вдоль главной оси до распределения свободного места или сжатия. При обычном row это размер по горизонтали, при column по вертикали. Если basis задан явно, например 100px, он используется как база вместо width: 200px в расчете flex-раскладки. Но итог может отличаться от обеих величин, потому что затем работают flex-grow, flex-shrink и ограничения размеров. Для примера flex: 0 0 100px задает базу 100px и отключает рост со сжатием, однако min/max-размеры и модель коробки все равно нужно учитывать. Значение auto берет подходящий основной размер, например width для row, а при его отсутствии ориентируется на содержимое. Поэтому basis не следует воспринимать как окончательную ширину.
Датахакер
Я считал basis окончательной шириной.
Датахакер
У меня длинное слово не давало сжиматься.
Датахакер
Теперь вижу, почему width в инспекторе зачеркнут не как обычная ошибка.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
4.1 Fast
4.1 Fast
Flex basis css что это?
Flex-basis является стартовым размером по главной оси. Явное значение, например 100px, имеет приоритет перед width при расчете базы обычного flex-ряда. Дальше grow и shrink могут изменить результат. Запись
flex: 0 0 100pxотключает эти изменения, но ограничения min/max и box-sizing остаются. При flex-direction: column речь идет уже о вертикальном основном размере.