Я хочу знать, как вычисляются flex-basis: auto & min-width: 0
и width: auto
(width
не установлен для родительского элемента и элемента flex). Поэтому я подтвердил спецификацию W3C. Правильно ли мое понимание ниже?
flex-basis: auto
(Нет определения ширины для родительского элемента, установлено min-width: 0
)
Я прочитаю эту часть (7.1. Гибкая стенография). Затем я обнаружил, что flex-basis: content
используется, когда flex-basis: auto
. Расчетное значение flex-basis: content
, по-видимому, описано в главе 9. Алгоритм Flex Layout.
авто
При указании в элементе flex ключевое слово auto извлекает значение свойства основного размера в качестве использованной основы flex. Если это значение само по себе auto, тогда используемое значение является содержимым.
содержание Указывает автоматический размер в зависимости от содержимого элементов Flex. (Как правило, он эквивалентен максимальному размеру контента, но с настройками для обработки форматных соотношений, внутренних ограничений по размеру и ортогональных потоков; см. подробности в §9 Алгоритма разметки Flex.)
Я прочитал эту главу 9. Тогда я знал, что предложение, относящееся к flex-basis
, было 9.2.3-C Определение длины строки.
Если используемая основа Flex является содержимым или зависит от его доступного пространства, а размер контейнера Flex ограничен ограничением min-content или max-content (например, при выполнении автоматического размещения таблицы [CSS21]), задайте размер элемента в соответствии с этим ограничением. Размер базового гибкого элемента - это основной размер элемента.
.container {
display: flex;
border: 3px solid green;
overflow-wrap: break-word;
}
.box1 {
flex-basis: content;
/* 'flex-basis: auto' works the same way */
border: 3px solid red;
}
<div class="container">
<div class="box1">flex-basis: content texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>