Мне нужна помощь, чтобы понять, что делает этот гибкий стиль на простом английском

Question

Мне нужна помощь, чтобы понять, что flex: 0 0 673px делает с моим элементом на простом английском языке.

Я прочитал документацию css trick и другие mdn, и это не помогает.Если бы кто-то мог объяснить это мне, как я хотел бы иметь возможность объяснить это своему малышу, это помогло бы.

Очевидно, я не парень CSS, спасибо.

Answer 1

С MDN :

Свойство flex может быть указано с использованием одного, двух или трех значений.

[...]

Синтаксис с тремя значениями:

• первое значение должно быть без единицы <number>, и оно интерпретируется как <flex-grow>.
• второе значение должно быть без единиц измерения <number> и интерпретируется как <flex-shrink>.
• третье значение должно быть действительным значением для width и интерпретируется как <flex-basis>.

Исходя из этого, мы можем сказать, чтоflex: 0 0 673px; является сокращением, но на самом деле он не говорит нам, что означает каждое значение.Вот краткий эквивалент:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 673px;

Итак, давайте посмотрим на каждое из этих свойств по очереди.Давайте начнем с flex-basis, потому что в его названии есть «основа» и звучит как хорошее место для начала.

flex-basis:

Свойство flex-basis CSS устанавливает начальный основной размер элемента Flex.Он устанавливает размер поля содержимого, если иное не установлено с помощью box-sizing.

Расчет гибкого макета - это процесс, состоящий из нескольких этапов.Игнорируя часть о box-sizing, это свойство указывает механизму макета запускаться, устанавливая для каждого элемента этот размер в направлении flex.У него есть некоторые другие специальные значения ( подробно описано в MDN ), но в этом суть.

flex-grow:

Свойство flex-grow CSS определяет, сколько свободного пространства в гибком контейнере должно быть назначено этому элементу (коэффициент роста гибкого канала).

Если гибкий контейнербольше, чем объединенный базовый размер каждого элемента внутри него, механизм компоновки будет растягивать и / или растягивать элементы для заполнения контейнера.Это свойство определяет своего рода коэффициент масштабирования;элемент с flex-grow, установленным на 2, будет растягиваться вдвое больше, чем один с 1. Значение 0 указывает механизму макета никогда не растягивать этот элемент.

flex-shrink:

flex-shrink Свойство CSS устанавливает коэффициент сжатия при сгибании.Если размер изгибаемых элементов больше, чем у гибкого контейнера, то элементы уменьшаются в соответствии с flex-shrink.

Итак, мы знаем, как заполнить больший контейнер.Но что, если контейнер слишком маленький?Применяется тот же принцип, только на этот раз с использованием свойства flex-shrink.Обратите внимание, что использование 0 для этого может привести к тому, что гибкие элементы переполнят свой контейнер.

Answer 2

Первое значение - это flex flex, который практически равен размеру конкретного элемента Flex относительно других элементов Flex, поэтому, если вы укажете значение 2, ширина будет в два раза больше ширины остальных элементов Flex.То есть гибкий изгиб в два раза, когда ширина обычного гибкого элемента равна 20px, сделает этот элемент размером 40px.Второе значение flex shrink делает противоположное.Третья гибкая основа означает, что этот гибкий элемент не будет выходить за рамки этого размера, он больше похож на минимальную ширину в контексте гибкой коробки.# веселит

Answer 3

Я не уверен, что еще я могу объяснить, что уловки CSS не помогают, однако я попытаюсь.

Первое значение - это значение flex-grow, которое определяет, на какую часть оставшейся доли оно вырастет.,В этом случае из-за того, что вы установили его на 0, это означает, что он не будет расти и не станет больше.

Второе значение - это значение flex-shrink, которое определяет, на какую часть оставшейся дроби оно будет уменьшаться.В этом случае из-за того, что вы установили его в 0, это означает, что он не будет сжиматься и станет меньше по ширине.

Третье значение - это гибкая основа, которая определяет, какой должна быть базовая ширина, когда не используется другое значение.рассчитанный из-за того, что вы установили его в 673px, это означает, что ширина будет 673px.

Если вы не используете flex, то текущие значения равны ширине: 673px;

Я уверенесли я допустил ошибку в своем объяснении, кто-то сможет увидеть это.

Надеюсь, это поможет.