Flex 0 1 auto что это
Размер flex-элемента (свойство flex: flex-grow, flex-shrink, flex-basis) | Flexbox | CSS
Пример вёрстки Flexbox:
flex-basis : исходный размер flex-элемента
Свойство flex-basis взаимодействует с box-sizing также как width / height в блочной модели:
flex-grow : доля от поначалу незанятого пространства flex-контейнера, увеличивающая flex-элемент
Если flex-элементов несколько, то они вне зависимости от исходного размера разделят между собой поначалу незанятое пространство flex-контейнера согласно указанным в flex-grow пропорциям.
flex-shrink : доля от поначалу выходящего за пределы flex-контейнера пространства, уменьшающая flex-элемент
Если flex-элементов несколько, то они разделят между собой поначалу выходящее за flex-контейнер пространство согласно указанными в flex-shrink пропорциям.
Распределение пространства flex-контейнера в цифрах
Flex-элементы имеют относительную связь друг с другом
Как рассчитывается ширина элементов в flex-контейнере:
Как рассчитывается ширина элементов в flex-контейнере:
Ширина/высота flex-элемента не превышает значения свойств max-width / max-height
Как рассчитывается ширина элементов в flex-контейнере:
Как рассчитывается ширина элементов в flex-контейнере:
Ширина/высота flex-элемента не может быть менее значения свойств min-width / min-height
Как рассчитывается ширина элементов в flex-контейнере:
CSS свойство flex
Универсальное свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты пропорционально с учётом заданного соотношения или сжаты, чтобы целиком вместить все элементы без переносов в одну строку.
Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: «flex: 0 1 auto;«. Можно указывать как одно, так и все три значения свойств.
Рекомендуется использовать именно сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.
Внимание: Если элемент не является флекс-элементом, то свойство flex не будет иметь эффекта.
CSS синтаксис
Возможные значения
| Значение | Описание |
|---|---|
| flex-grow | Коэффициент растяжения. Коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов. |
| flex-shrink | Коэффициент сужения. Коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов. |
| flex-basis | Базовая ширина флекс-элемента. |
| auto | Эквивалентно «flex: 1 1 auto;«. |
| none | Эквивалентно «flex: 0 0 auto;«. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Эквивалентно «flex: 0 1 auto;«. |
Пример использования
Устанавливаем единую длину для всех флекс-элементов не зависимо от их содержимого
Всё о ключевом слове auto в CSS
Свойство width: auto
«Ширина блока, содержащего элемент» — это, в соответствии со спецификацией CSS, значение, вычисляемое по следующей формуле:
Сравнение width: auto и width: 100%
Рассмотрим, в качестве примера, особенности устройства вышеприведённых макетов.
Тут всё выглядит как надо, содержимое ограничено родительским элементом.
Элемент находится в пределах родительского элемента
А вот что получится после его применения к элементу.
Элемент выходит за пределы родительского элемента (направление текста — ltr)
Элемент выходит за пределы родительского элемента (направление текста — rtl)
Здесь можно поэкспериментировать с кодом примера.
▍Сценарии использования width: auto
Разная ширина элементов в мобильной и настольной версиях страницы
Мобильный и настольный варианты приложения
Имеется группа кнопок. Нужно, чтобы в мобильной версии приложения они были бы расположены рядом друг с другом (элемент, заключающий в себе кнопку, должен занимать 50% родительского элемента). В настольной версии приложения каждая кнопка должна занимать всю ширину контейнера-родителя. Как это сделать?
Для того чтобы разместить кнопки рядом друг с другом в мобильном варианте страницы, я воспользовался flexbox-макетом. Вот соответствующий CSS:
Вот рабочий вариант этого примера.
Свойство height: auto
Рассмотрим следующий пример:
Родительский и дочерний элементы
Поля и ключевое слово auto
Полями (внешними отступами) чаще всего пользуются для горизонтальной центровки элементов, ширина которых известна.
Элемент, который надо выровнять по центру
Синий прямоугольник нуждается в горизонтальном выравнивании по центру. Для этой цели можно воспользоваться следующим стилем:
Обратимся к спецификации CSS:
Если свойства ‘margin-left’ и ‘margin-right’ установлены в значение ‘auto’, ширина полей оказывается одинаковой. Это приводит к горизонтальной центровке элемента относительно краёв включающего его в себя блока.
Поля элемента имеют одинаковую ширину
Вот демонстрация этого примера.
▍Использование свойства margin: auto для абсолютно позиционированных элементов
Для того чтобы свойство margin: auto позволило бы нам соответствующим образом выровнять элемент, нужно, чтобы были бы выполнены следующие условия:
Вот демонстрация этой методики выравнивания элементов.
Flexbox-макеты и автоматическая настройка полей
Посмотрим на следующий макет. Тут есть два прямоугольных дочерних элемента, находящихся в родительском flexbox-элементе.
Пара элементов во flexbox-контейнере
Нам нужно, чтобы элемент №2 был бы перемещён к правой границе контейнера. Для этого отлично подходит использование значения auto для свойства margin-left :
Вот что получилось после применения такого стиля.
Элемент №2 перемещён к правому краю контейнера
Надо отметить, что этот приём работает и при вертикальном выравнивании элементов. Применим в данном примере следующий стиль элемента №2:
Элемент №2 перемещён к нижнему краю контейнера
Этого достаточно для центровки элемента.
Элемент №1 выровнен по центру контейнера
▍Свойство flex и значение auto
Другими словами, размер элемента со свойством flex: auto будет задан, основываясь на его ширине и высоте. Но этот элемент может растягиваться или сжиматься в зависимости от того, какое пространство доступно ему в контейнере. Я об этом не знал до тех пор, пока не занялся исследованиями для этой статьи.
Как обычно, рассмотрим пример.
Использование flex: auto
Вот рабочий вариант этого примера.
Grid-макеты и значение auto
▍Использование значения auto при настройке столбцов
Использование стиля grid-template-columns: auto 1fr 1fr
При разработке Grid-макетов можно использовать значение auto при настройке столбцов. Это будет означать, что ширина столбцов будет зависеть от размеров их содержимого. Вот что я имею в виду:
▍Grid-макеты и использование значения auto для настройки полей
Рассмотрим следующий пример.
Нам нужно, чтобы ширина элемента Item 1 зависела бы от его содержимого, а не от доступного ему пространства сетки. Для этого мы можем воспользоваться следующим стилем:
Вот результат применения этого стиля.
Ширина элемента зависит от его содержимого
▍RTL-макеты
Стоит отметить, что использование свойств margin-left: auto или margin-right: auto хорошо показывает себя для LTR-макетов (для макетов, в которых содержимое расположено слева направо), например, для таких, которые используются для вывода текстов, написанных на английском. Но знайте о том, что на многоязычных сайтах эти значения меняются местами. Ещё лучше, и я бы порекомендовал поступать именно так, пользоваться в таких макетах Flexbox- или Grid-свойствами, делая это в тех случаях, когда поставленной цели можно достичь с их помощью. Если этого с помощью таких свойств добиться нельзя, прибегайте к настройке margin-свойств с использованием auto только в крайнем случае. Вместо них лучше применять логические свойства CSS.
Свойство overflow
Работая с элементами веб-страниц, нам нужно знать о размерах содержимого, которое способны вмещать эти элементы. Если содержимое оказывается больше того, что способен вместить элемент, нужно, для работы с таким содержимым, показать полосу прокрутки.
Для решения этой задачи можно попытаться воспользоваться следующим стилем:
Но при таком подходе полоса прокрутки может появиться даже в том случае, если в элементе выводится содержимое, размер которого не превышает размеров элемента. Вот пример.
Элемент, которому назначен стиль overflow-y: scroll
В браузере Chrome на платформе Windows полоса прокрутки выводится всегда. Это — пример неправильного поведения элемента, которое способно запутать пользователя.
Использование вместо этого значения auto позволяет добиться того, что полоса прокрутки будет выводиться лишь в тех случаях, когда высота содержимого превышает высоту контейнера.
Свойства, отвечающие за позиционирование элементов
Рассмотрим следующий макет.
Исследование вычисленных стилей дочернего элемента
Теперь у вас может появиться вопрос о том, какая нам от этого польза. Предлагаю с этим разобраться.
Представим, что дочерний элемент надо разместить в 100px от левой границы родительского элемента при просмотре страницы на маленьких экранах, а на больших экранах можно разместить элемент там, где он располагался бы при применении значений, задаваемых по умолчанию.
Вот стиль, подходящий для маленьких экранов:
Как сбросить значение свойства left при просмотре страницы на больших экранах? Причём, значение left: 0 тут использовать нельзя, так как это приведёт к тому, что дочерний элемент прижмётся к краю родительского элемента, а нам это не нужно. Взгляните на макет страницы, показанный ниже. Он разъясняет мою мысль.
Дочерний элемент ведёт себя неправильно
Это означает, что при размещении элемента будет учитываться свойство padding родительского элемента, и будет обеспечиваться то, что дочерний элемент не «прилипнет» к краю родительского элемента.
Вот демонстрационный проект к этому разделу.
Примеры использования значения auto
▍Стрелка всплывающей подсказки
При создании всплывающих подсказок нужно, чтобы у них была бы стрелка, указывающая на тот объект, к которому относится подсказка. Так эти подсказки оказываются более понятными. В том случае, если мы занимаемся разработкой дизайн-системы, нам нужно предусмотреть разные состояния подсказок. Например, подсказки со стрелкой, указывающей налево, и со стрелкой, указывающей направо.
Стрелки подсказок, направленные в разных направлениях
▍Компонент-карточка
Возможно, в вашем проекте имеется компонент-карточка, на котором, в левом верхнем углу расположен какой-нибудь значок. Он может играть декоративную роль, а может представлять собой кнопку для выполнения некоего действия. Вне зависимости от роли значка компонент нужно проектировать так, чтобы значок можно было бы расположить и в его левом верхнем углу, и в его правом верхнем углу. Вот как это выглядит.
Компонент-карточка со значком, который расположен в разных углах
Используя свойство left: auto можно легко сбросить значение свойства, заданного в его базовой реализации. Вот CSS-код:
▍Flexbox-макеты и значение auto свойства margin
Рассмотрим следующий пример.
Автоматическая настройка полей элементов
Тут имеется вертикальный контейнер, содержащий заголовок элемента, его описание и кнопку, расположенную справа. Нам нужно, чтобы кнопка была бы привязана к правой части контейнера.
Готово! Использование свойства margin-left: auto позволяет поместить кнопку в правом верхнем углу элемента. А ещё приятнее то, что мы можем воспользоваться логическими CSS-свойствами в том случае, если разрабатываем многоязычный сайт. CSS-код будет примерно таким:
Если вы хотите больше узнать о RTL-стилизации — вот полезный ресурс, посвящённый этой теме.
▍Grid-макеты и значение auto свойства margin
Вот фрагмент разметки:
Применение этого стиля приведёт к результату, показанному на следующем рисунке.
Выравнивание подписей по левому краю полей для ввода данных
▍Проектирование модальных окон
Работая над дизайном модальных окон важно учитывать то, что содержимое, которое понадобится отобразить в окне, может целиком в него не поместиться. Для того чтобы окно нормально работало бы в такой ситуации, можно воспользоваться следующим стилем:
Благодаря такому стилю полоса прокрутки появится только в том случае, если содержимое окна окажется достаточно большим.
Итоги
В этом материале мы рассмотрели особенности применения ключевого слова auto в CSS. Надеемся, вам пригодится то, о чём вы сегодня прочли.
Уважаемые читатели! В каких ситуациях вы пользуетесь значением auto в CSS?
Углубляемся в свойство flex
Вы когда-нибудь задумывались о том, как работает свойство CSS flex? Это сокращение от flex-grow, flex-shrink и flex-base. Самый распространенный вариант использования, который я замечаю в Интернете, — это flex: 1, который позволяет элементу flex расширяться и заполнять доступное пространство.
В этой статье я подробно рассмотрю это свойство и объясню, когда и почему его можно использовать, с практическими и наглядными примерами.
Свойство Flex-Grow
flex-grow устанавливает коэффициент роста, который позволяет flex элементу увеличиваться и заполнять доступное пространство. Значение flex-grow принимает только целое число. Обратите внимание на следующее.
Примечание: flex-grow может влиять на ширину или высоту, в зависимости от свойства flex-direction. Для следующих примеров предположим, что для параметра flex-direction установлено значение row (значение по умолчанию), если я не уточню что-то еще.
Обратите внимание, что без использования flex-grow ширина элементов flex по умолчанию будет равна их начальной ширине. Однако при использовании flex-grow: 1 доступное пространство распределялось между ними.
Вам может быть интересно, как пространство распределяется между flex элементами? Что ж, это хороший вопрос, и я скоро на него отвечу.
На приведенном ниже рисунке показано, как элементы выглядят без flex-grow. Другими словами, это их естественный размер.
Чтобы понять, как рассчитывается ширина flex элемента, см. уравнение ниже. Я узнал об уравнении из этого поста Саманты Минг (Спасибо!).
Давайте посчитаем размер элемента, содержащего текст «CSS».
Ширина элемента (width) = ( (flex-grow / общее кол-во flex-grow) * доступное пространство) + начальная ширина элементов
Flex-grow: коэффициент увеличения flex для элемента
Total flex-grow: суммирование значения flex-grow для всех flex элементов
Available space: перед применением flex-grow
Item width: начальная ширина элемента
—> Item width = ( (1 / 3) * 498) + 77 = 241
Множественные flex-grow
В предыдущем примере значение flex-grow одинаково для всех flex элементов. Давайте попробуем добавить flex-grow: 2 для первого элемента. Как это будет рассчитываться? Имейте в виду, что доступное пространство для нашего примера составляет 498 пикселей.
Надеюсь, теперь стало понятнее.
Конечно! Поскольку свойство flex-grow принимает целочисленные значения, можно использовать 0 как способ предотвратить использование flex элемента для расширения на доступное пространство.
Это может быть полезно в особых случаях, когда мы хотим, чтобы flex элемент оставался с его начальной шириной.
Flex Grow не делает Flex элементы одинаковыми
Существует распространенное заблуждение, что использование flex-grow сделает элементы равными по ширине. Это неверно. Идея использования flex-grow заключается в распределении доступного пространства. Как вы видели в уравнении, ширина каждого гибкого элемента рассчитывается на основе его начальной ширины (ширина до применения flex-grow).
Если вы хотите, чтобы flex элементы были одинаковой ширины, это можно сделать с помощью flex-basis. Я объясню это в следующих разделах.
Свойство Flex-Shrink
flex-shrink устанавливает коэффициент уменьшения flex элемента. Если размер всех flex элементов больше, чем размер оболочки, элементы будут сжиматься в соответствии с коэффициентом flex-shrink.
Рассмотрим следующий пример. Средний элемент имеет ширину 300 пикселей, а для параметра flex-shrink установлено значение 1. Это позволит элементу уменьшиться по ширине, если нет места для размещения всех flex элементов.
Браузер сохранит ширину элемента равной 300 пикселей при следующих условиях:
Вот как элемент ведет себя с разными размерами области просмотра.
Как вы видите на рисунке, ширина составляет 300 пикселей, пока ширина области просмотра не станет меньше 300 пикселей.
Свойство Flex-Basis
Это свойство устанавливает начальный размер flex элемента перед распределением свободного пространства в соответствии с flex коэффициентами. Размер может относиться к ширине по умолчанию и высоте (в случае flex-direction: column).
Свойство flex-basis может принимать те же значения, что и свойства width или height. Значение по умолчанию — auto, которое разрешается в content. Значение content — это автоматический размер, основанный на размере содержимого flex элемента.
В приведенном выше примере ширина первого элемента составляет 50%. Важно установить для параметра flex-grow значение 0, чтобы размер элемента не превышал 50%.
Что будет, если вместо этого использовать 100%? Элемент займет 100% ширины своего родителя, а остальные элементы будут перенесены на новую строку.
Свойство Flex
Свойство flex это сокращение от flex-grow, flex-shrink и flex-base. Значение по умолчанию для flex — auto, которое разрешается как flex: 0 1 auto. Это означает, что оно позволяет flex элементам увеличиваться в зависимости от размера их содержимого.
В этом контексте есть кое-что важное, что я хотел бы выделить, а именно абсолютные и относительные flex элементы. Нет, речь идет не о позиционировании CSS, а о том, что связано с flexbox.
Относительный размер flex элементов
В этом случае размер flex элементов будет зависить от содержимого. В результате flex элементы с большим количеством содержимого будут больше.
Абсолютный размер flex элементов
Напротив, когда для свойства flex-based установлено значение 0, все flex элементы будут увеличиваться до одинакового размера.
Что мне нравится в свойстве Flex
Судя по названию, это свойство очень гибкое в принимаемых значениях. Рассмотрим следующие примеры.
Одно значение без указания единиц измерения
Если у него есть только одно значение, то это значение будет считаться как flex-grow.
Два значения без указания единиц измерения
Эти значения будут соответствовать flex-grow и flex-shrink соответственно. По умолчанию для flex-basis будет установлено значение 0.
Одно значение с указанием длины
Это будет использоваться для flex-basis. Для параметров flex-grow и flex-shrink по умолчанию будет установлено значение 1.
Использование 0 без указания единиц измерения
В случаях, когда вам нужно установить flex-basis в ноль, используя сокращение flex.
Такое использование не рекомендуется, так как это запутает и разработчика, и браузер. Как вы можете решить, соответствует ли этот 0 коэффициентам flex (grow или shrink) или flex-basis? Это сбивает с толку. Согласно спецификации CSS:
Ноль без указания единиц измерения, которому не предшествуют два коэффициента flex, следует интерпретировать как коэффициент flex. Чтобы избежать неправильного толкования или недопустимых объявлений, авторы должны указать нулевой компонент с единицей измерения или поставить перед ним два фактора flex.
Рекомендуется добавить единицу измерения, например px или %.
Рекомендуется использовать сокращение flex
Когда вам нужно установить grow, shrink и basis, лучше использовать для этой цели свойство flex.
Авторам рекомендуется контролировать flexibility, используя сокращение flex, а не напрямую его свойства, так как сокращение правильно сбрасывает любые неуказанные компоненты для соответствия общему использованию.
Случаи использования
Аватар пользователя
Типичный вариант использования flexbox — пользовательский компонент. Аватар и текстовое содержимое должны находиться в одной строке.
Обратите внимание, что я добавил для аватара flex: 0 0 70px. Это важно, поскольку в некоторых старых браузерах изображение может выглядеть сжатым, если не установлен параметр flex. Кроме того, flex имеет более высокий приоритет, чем свойство width (в случае flex-direction: row) или height (в случае flex-direction: column).
Если мы изменим размер аватара, настроив только свойство flex, width будет проигнорирована браузером.
Заголовок раздела
У вас есть title для заголовка раздела, и он должен занимать все доступное пространство. В этом случае идеально подходит flex: 1.
Элемент Input для отправки сообщений
Это очень распространено в приложениях для обмена сообщениями, таких как Facebook Messenger или Twitter. Входные данные должны заполнять доступное пространство с фиксированной шириной для кнопки отправки.
Приведенные выше примеры являются полезными примерами использования flex-grow. Однако некоторые случаи игнорируются или вообще не упоминаются в некоторых статьях по flex. Давайте рассмотрим их!
Выравнивание элементов на двух картах
Предположим, что CSS-сетка имеет макет из двух столбцов. Проблема в том, что положение дат не совпадают. Они должны быть на одной линии (красной).
Мы можем сделать это с помощью flexbox.
Устанавливая flex-direction: column мы можем использовать flex-grow для заголовка, чтобы он заполнял доступное пространство и, таким образом, размещал дату в конце, даже если заголовок короткий.
Кроме того, это возможно без использования flex-grow. Благодаря auto margins и flexbox! Я написал подробную статью об auto в CSS, если вы хотите вникнуть в подробности.
Сценарии использования — более одного фактора гибкости
Здесь я имею в виду использование flex-grow или flex-shrink, но со значением, отличным от 1. В этом разделе я рассмотрю некоторые идеи использования.
Действия в футоре
Вдохновленный Facebook (я тоже украл значки), этот нижний колонтитул (footer) действий состоит из четырех элементов, а последний имеет меньшую ширину. Мы можем сделать это следующим образом:
Расширяющая анимацию
Мы можем сделать интересную вещь — анимировать flex элемент при наведении курсора. Это может быть чрезвычайно полезно. Вот простой пример этого:
Расширение тарифного плана
Мне нравится демонстрация на Codepen. Как только card активирована, она расширяется, изменяя flex-grow на 4.
Когда контент больше, чем его оболочка
Некоторое время назад я получил письмо от читателя с вопросом о проблеме, с которой он столкнулся. Как и на рисунке, у нас есть два изображения, которые должны оставаться в границах своей оболочки.
Однако даже с flex: 1 изображения все равно выходят за пределы оболочки. Согласно спецификации CSS:
По умолчанию flex элементы не сжимаются меньше своего минимального размера содержимого (длины самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство min-width или min-height.
В нашем случае изображения слишком большие, и flexbox не сжимает их, чтобы поместиться в оболочку. Чтобы изменить это поведение, нам нужно установить следующее:
Я объяснил эту проблему в своей статье о минимальной и максимальной width / height в CSS.
Заключение
Вот и все. Я объяснил основы свойств flex и объяснил, как их использовать. Надеюсь, вы узнали что-то новое из этой статьи. У вас есть комментарий или предложение? Пожалуйста, напишите мне на @shadeed9.
Я пишу электронную книгу
Рад сообщить вам, что я пишу электронную книгу об Debugging CSS.