Что я показываю ему в flexbox с этим выбором flex: 1 0 автомобиль?

Что значит 1, 0 и автомобиль? flex: 1 0 auto; использовав flexbox.

4
задан 30.12.2016, 20:49
0 ответов

Что значит 1, 0 и автомобиль? flex: 1 0 auto;

3 стоимость: flex-grow | flex-shrink | flex-basis

<'flex-grow'>
Определи flex-grow гибкого элемента. Просмотреть <number> чтобы получать больше деталей. Отрицательная стоимость не считается действительной. Предопределенной стоимости 1, когда он опускается.

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

  • В твоем случае 1а именно, размер пропорционален 1.

<'flex-shrink'>
Определи flex-shrink гибкого элемента. Просмотреть <number> чтобы получать больше деталей. Отрицательная стоимость не считается действительной. Предопределенной стоимости 1, когда он опускается.

Свойство flex-shrink CSS определи фактор сжатия сгибания гибкого элемента.

  • В твоем случае 0а именно, он идет уменьшать в 0 раза быстрее, чем Ваши братья.

<'flex-basis'>
Определи flex-basis гибкого элемента. Принимается любая действительная стоимость для свойств width и height. У предпочитаемого размера 0 должна быть единица, чтобы избегать быть интерпретированным как гибкая проволока. Предопределенная стоимость - 0 %, когда он опускается.

Свойство flex-basisспецифического CSS гибкое основание, которое является начальным размером гибкого элемента. Эта свойство определяет размер ящика контентов если только он не был определен другой формы используя box-sizing.

  • В твоем случае autoа именно, Ваш начальный размер будет вычислен автоматически.

Шрифт: flex - CSS | MDN

2
ответ дан 03.12.2019, 17:54
  • 1
    +1. С примером, ответом quedarí в очень полную. Например, показывать в qué случаи может быть ú til. Мне приходят в голову примеры как sticky header и footer, и т.д. –  30.12.2016, 22:37

Согласно документации w3c.org (официального сайта), свойству flex позволь в контейнер распространять свободное место в Ваши элементы (пропорциональный Вашему фактору flex grow) чтобы наполнять контейнер, или он сморщивает их (пропорциональный фактору flex shrink) чтобы предотвращать избыток (overflow).

Поскольку ты можешь наблюдать, документация говорит тебе о двух свойствах элементов, которые содержались в контейнере flex в вашем собственном определении. Однако, свойство flex смоги принимать следующую стоимость:

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

И начальная стоимость для свойства flex он:

flex: 1 0 auto

Каждая из возможной стоимости свойства flex соответствуй в:

  • flex-grow: Это фактор роста. Соответствуй числу, которое определяет, сколько вырастет гибкий элемент в связи с оставшейся частью гибких элементов внутри контейнера flex если есть свободное место. Когда он опускается, это эквивалент, который должен помещать 1.

  • flex-shrink: Эта стоимость определяет фактор сжатия и - тот, который определяет, сколько заключит гибкий элемент в связи с оставшейся частью гибких элементов внутри контейнера flex если нет места в контейнере. Когда он опускается, это эквивалент, который должен помещать 1.

  • flex-basis: Эта стоимость определяет начальную стоимость гибкого элемента до того, как свободное место было распространено в соответствии с факторами сгибания (flex-grow и flex-shrink). Когда опускается Ваша стандартная настройка, его 0.

Стоимость, которую он может брать flex-basis они:

  • auto: Когда он берет эту стоимость, flex-basis возьми стоимость главного свойства размера, использованного как flex-basis. Если эта стоимость auto сам, тогда использованная стоимость content.

  • content: Покажи автоматическую настройку размера, основанного на контенте flex статьи.

  • width: Для оставшейся части стоимости, flex-basis он решен таким же образом как ширина (width) и высота (height).

  • none: Стоимость none равняется в 0 0 auto.

В конце концов, я оставляю изображение, доставшее также из документации, в которой он отличается между устанавливанием flex "абсолютно" (начинаясь с одним flex-basis 0) или "относительный" flex (исходя из размера контента элемента как основание). У трех элементов есть факторы flex 1, 1 и 2 соответственно. Обрати внимание, что элемент с фактором flex 2 растет двойная порция.

introducir la descripción de la imagen aquí

1
ответ дан 03.12.2019, 17:54

Общая стоимость flex:

Flex: 0 автомобиль;

Это то же самое что flex: initial;уже стенография для стандартной настройки: flex: 0 1 автомобиль. Встречается размер элемента, основанного на Вашем width / height (или Ваш контент, если он не устанавливается).

Flex: автомобиль;

Это эквивалентное в flex: 1 1 auto. Будь осторожен, это не стандартная настройка. Встречается размер элемента, основанного на Вашем width / height, но способствует тому, чтобы это была полностью гибкая проволока, так что он поглощает любое добавочное место на протяжении главной оси.

Flex: ничего;

Это эквивалентное в flex: 0 0 auto. Встречается размер элемента согласно Вашему width / height, но делает это полностью несгибаемым.

Шрифт

3
ответ дан 03.12.2019, 17:54

Теги

Похожие вопросы