Как мы можем рассчитать «flex-based: auto & min-width» и «width at cross axis»? - PullRequest
Новая
       7

Как мы можем рассчитать «flex-based: auto & min-width» и «width at cross axis»?

0 голосов
/ 20 декабря 2018

Я хочу знать, как вычисляются 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 .

auto

При указании в элементе flex ключевое слово auto извлекает значение свойства основного размера в качестве использованной базы Flex. Если это значение само по себе auto, тогда используемым значением является content .

content

Указывает автоматический размер в зависимости от содержимого элемента flex.(Как правило, это эквивалентно максимальному размеру контента, но с корректировками для обработки соотношений сторон, внутренних ограничений по размеру и ортогональных потоков; см. Подробности в §9 алгоритма разметки Flex.)

Я прочиталту главу 9. Тогда я знал, что предложение, относящееся к flex-basis, было 9.2.3-C Определение длины строки .

Если используемый гибкий базис является содержимым или зависит отего доступное пространство, а размер гибкого контейнера измеряется в соответствии с ограничением 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>

Однако, поскольку я установил min-width: 0, размер гибкого элемента определяется на основе 9.2.3-D .

В противном случае, если используемая основа Flex является содержимым или зависит от его доступного пространства, доступный основной размер бесконечен, а встроенная ось элемента Flex параллельна главной оси, выложите элемент, используяправила для бокса в ортогональном потоке [CSS3-WRITING-MODES].Базовый размер flex - это максимальный основной размер элемента.

.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;
  min-width: 0;
}
<div class="container">
  <div class="box1">flex-basis: content texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Вопрос 1 .Учитывает ли вычисление main size (max-content) этого гибкого элемента новые строки в word-wrap?

width: auto (на поперечной оси align-items не установлено stretch)

Расчетное значение width на поперечной оси (flex-direction: column)кажется написано в 9.4.11.Определение размера креста .

Определите используемый размер креста для каждого изгибаемого элемента.Если у гибкого элемента есть align-self: stretch, его вычисленное свойство размера креста равно auto, и ни одно из его полей поперечной оси не является автоматическим, используемый внешний размер креста является используемым размером креста его линии сгиба, зажатого в соответствии с элементомминимальные и максимальные размеры крестовины. В противном случае используемый размер креста является гипотетическим размером креста элемента.

"гипотетический размер креста" объясняется в 9.4.7.Определение размера креста.

Определите гипотетический размер креста для каждого элемента, выполнив макет с использованием используемого основного размера и доступного пространства, , обработав auto как fit-content .

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Set a value other than `align-items: stretch` */
  border: 3px solid green;
  overflow-wrap: break-word;
}

.box1 {
  border: 3px solid red;
}
<div class="container">
  <div class="box1">align-items: flex-start texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Вопрос 2 .Учитывает ли вычисление cross size (fit-content) этого гибкого элемента новые строки в word-wrap?

...