Flex grow css: flex-grow | CSS

Содержание

flex-grow | CSS | WebReference

Определяет, сколько пространства может занимать флекс внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Применяется	К флекс-элементам
Анимируется	Да

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Принимаются целые (1, 2, 3,…) или дробные числа (например: 0.6). Отрицательные значения игнорируются.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>flex-grow</title>
<style>
form {
width: 400px;
margin: auto;
}
p {
display: flex;
}
label {
margin-right: 10px;
}
input, select {
flex-grow: 1;
}
</style>
</head>
<body>
<form action=»handler.php»>
<p>
<label>Имя:</label>
<input name=»name»>
</p>
<p>
<label>Какая у вас операционная система?:</label>
<select name=»os»>
<option value=»1″>Windows</option>
<option value=»2″>Linux</option>
<option value=»3″>Mac OS</option>
</select>
</p>
<p><button>Отправить</button></p>
</form>
</body>
</html>

Результат данного примера показан на рис. 1.

Ширина полей формы

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-grow.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

Свойство flex-grow | CSS справочник

basicweb.ru

HTML
Учебник HTML
Справочник тегов
Атрибуты событий
Глобальные атрибуты
Коды языков
Мнемоники
Цвета
Тесты знаний
CSS
Учебник CSS
Справочник свойств
Селекторы
Функции
Правила
Flexbox генератор
Grid генератор
Учебник LESS
JavaScript
Интерфейсы веб API
Объект Array
Объект Date
Объект Function
Объект Global
Объект JSON
Объект Math
Объект Number
Объект Object
Объект RegExp
Объект Promise
Объект String
jQuery
Селекторы
События
Методы DOM
Перемещения
Утилиты
Эффекты
AJAX
Объект Callbacks
Объект Deferred

HTML

HTML учебник

Справочник тегов

Атрибуты событий

Глобальные атрибуты

Мнемоники

Коды языков

HTML цвета

Тесты знаний

CSS

CSS учебник

Справочник свойств

CSS селекторы

CSS функции

CSS правила

Flexbox генератор

Grid генератор

LESS учебник

JavaScript

Интерфейсы веб API

Объект Array

Объект Date

Объект Function

Объект Global

Объект JSON

Объект Math^β

Объект Number

Объект Object

Объект Promise

Объект RegExp

Объект String

jQuery

jQuery селекторы

jQuery события

jQuery методы DOM

jQuery перемещения

jQuery утилиты

jQuery эффекты

jQuery AJAX

jQuery объект Callbacks

jQuery объект Deferred

CSS свойства

align-content

align-items

align-self

all

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

backface-visibility

background

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-repeat

background-size

border

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-color

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

bottom

box-shadow

box-sizing

break-after

break-before

break-inside

caption-side

clear

clip

color

column-count

column-fill

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-span

column-width

columns

content

counter-increment

counter-reset

cursor

direction

display

empty-cells

filter

flex

flex-basis

flex-direction

flex-flow

flex-grow

flex-shrink

flex-wrap

float

font

@font-face

font-family

font-size

font-style

font-variant

font-weight

grid

grid-area

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column

grid-column-end

grid-column-gap

grid-column-start

grid-gap

grid-row

grid-row-start

grid-row-gap

grid-row-end

grid-template

grid-template-areas

grid-template-columns

grid-template-rows

justify-content

justify-items

justify-self

height

@keyframes

left

letter-spacing

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

@media

min-height

min-width

opacity

order

orphans

outline

outline-color

outline-offset

outline-style

outline-width

overflow

overflow-wrap

overflow-x

overflow-y

padding

padding-bottom

padding-left

padding-right

padding-top

page-break-after

page-break-before

page-break-inside

perspective

perspective-origin

place-content

place-items

place-self

position

quotes

resize

right

tab-size

table-layout

text-align

flex-grow | CSS справочник

Поддержка браузерами


11.0+		28.0+	29.0+	17.0+	9.0+

Описание

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

Значение по умолчанию:	0
Применяется:	к flex-элементам
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.flexGrow=»2″;

Синтаксис

flex-grow: число;

Значения свойства

Значение	Описание
число	Значение по умолчанию 0, указывает что элемент имеет заданные размеры или размеры относительно его содержимого. Все положительные значения указывают, как будет распределяться свободное пространство между всеми flex-элементами. Например, есть 5 элементов с шириной в 100px каждый, они лежат в контейнере с шириной в 1000px. Если каждому из них задать flex-grow: 1, то свободное пространство в 500px будет поделено на 5 и поровну разделено между всеми элементами (по 100px на каждый). Если одному из 5 элементов задать flex-grow: 6, то 500px будет разделено на 10 частей (так как в сумме значения свойства flex-grow дали 10) и элементам со значением 1 достанется по 50px (500 : 10 · 1 = 50) свободно пространства, а элементу со значением 6 — 300px (500 : 10 · 6 = 300). Если только одному из flex-элементов было задано свойство flex-grow с любым положительным значение, то этот элемент займёт всё свободное пространство.

Значение

Описание

число

Значение по умолчанию 0, указывает что элемент имеет заданные размеры или размеры относительно его содержимого.

Все положительные значения указывают, как будет распределяться свободное пространство между всеми flex-элементами. Например, есть 5 элементов с шириной в 100px каждый, они лежат в контейнере с шириной в 1000px. Если каждому из них задать flex-grow: 1, то свободное пространство в 500px будет поделено на 5 и поровну разделено между всеми элементами (по 100px на каждый).

Если одному из 5 элементов задать flex-grow: 6, то 500px будет разделено на 10 частей (так как в сумме значения свойства flex-grow дали 10) и элементам со значением 1 достанется по 50px (500 : 10 · 1 = 50) свободно пространства, а элементу со значением 6 — 300px (500 : 10 · 6 = 300).

Если только одному из flex-элементов было задано свойство flex-grow с любым положительным значение, то этот элемент займёт всё свободное пространство.

Пример

Всем flex-контейнерам, кроме синего задано flex-grow: 1;, они не имеют фиксированной ширины, поэтому пространство flex-контейнера будет распределятся в зависимости от значения свойства flex-grow:

#myBlueDiv {
flex-grow: 0;
}

flex-grow странный. Так ли это? — CSS-LIVE

Перевод статьи `flex-grow` is weird. Or is it?s с сайта css-tricks.com, опубликовано на css-live.ru, автор — Мануэль Матузовик.

Перед вами гостевой пост Мануэля Матузовика. В нем показано, как работает flex-grow, а также его странные выкрутасы и всё такое. А затем на нескольких примерах мы увидим, как можно реализовать типовые задачи раскладки с помощью flex-grow и flex-basis.

Когда я узнал про flex-grow, то тут же сделал простой пример, чтобы понять для чего оно и как работает. Я думал, что во всём разобрался, но когда я решил попробовать его на сайте, который смастерил мой коллега, то оно меня подвело. И что бы мы ни делали, раскладка выглядела и вела себя не так, как в том примере. И я поневоле засомневался, а понял ли я вообще хоть что-то про flex-grow.

Как flex-grow не работает

Прежде чем погрузиться в функциональность flex-grow, я бы хотел объяснить, где ошибся сначала.

Я подумал, что все flex-элементы с flex-grow:1 будут равной ширины. А если одному из элементов установить flex-grow:2, то он будет вдвое больше остальных.

Звучит неплохо. Кажется, что именно это и происходит в ранее упомянутом примере на CodePen. Ширина родительского элемента 900px, вычисленная ширина элемента section с flex-grow:2 600px, а элемента aside с flex-grow:1 — 300px.

Как видите, в демо-примере всё работает замечательно, в отличие от примера из реальной жизни, где это не работало вообще, даже с одинаковым CSS. Как выяснилось, проблема была не в CSS, а в контенте (точнее в его отсутствии). Демо-пример работает, поскольку в нём используются только два пустых элемента, и он слишком прост, чтобы отобразить важные особенности свойства.

Как flex-grow действительно* работает*

Я только что описал, как flex-grow не работает, но показал демо-пример, который делает как раз то, чего, по моим словам, делать не должен (позже я объясню причину)

Чтобы прояснить ситуацию, я сделал ещё один пример на Codepen. Настройки остались такими же, но на этот раз в элементах section и aside есть контент. Теперь соотношение уже не 2:1, и элемент с flex-grow:1 фактически больше элемента с flex-grow:2.

Объяснение

У родительского элемента с display: flex; (без дополнительных настроек) дочерние элементы выстраиваются друг за другом горизонтально, несмотря ни на что. При нехватке свободного места элементы сужаются. Но если места предостаточно, элементы не растягиваются, поскольку Flexbox оставляет за нами право решать, насколько должны растягиваться элементы. Поэтому, вместо того, чтобы сообщить браузеру ширину элемента, flex-grow определяет, как оставшиеся пространство распределяется между flex-элементами, и доли каждого из них.

Иначе говоря:

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

https://drafts.csswg.org/css-flexbox/#flexibility

Демонстрация

Эту идею гораздо легче понять на наглядном примере.

Для начала установим свойству display родительского элемента значение flex, и теперь дочерние элементы становятся flex-элементами и располагаются горизонтально друг за другом.

Затем определимся с долями дополнительного пространства для каждого элемента. В предыдущем примере первый элемент получает 2/3 оставшегося пространства (flex-grow: 2), а второй — 1/3 (flex-grow: 1). Зная общее количество значений flex-grow, мы получаем число, на которое делим оставшееся пространство.

И наконец, мы получили число долей для распределения. Каждый элемент получает соответствующее число долей, в зависимости от значения flex-grow.

Вычисление

Теория и наглядный пример — это приятно, но давайте не поленимся и посчитаем этот пример сами.

Для вычисления понадобятся четыре числа: ширина родительского элемента, исходная ширина элементов section и aside и общее число значений flex-grow, которое мы собираемся использовать.

родительская ширина: 900px
ширина section: 99px
ширина aside: 623px
сумма значений flex-grow: 3

1. Для начала нужно вычислить оставшееся пространство

Это не сложно. Возьмём родительскую ширину и вычтем из неё общую начальную ширину каждого дочернего элемента.

900 - 99 - 623 = 178

родительская ширина − начальная ширина section − начальная ширина aside = оставшееся пространство

2. Далее нужно определить, сколько приходится на один flex-grow

Вычислив оставшееся пространство, нужно определить, на сколько долей его разделить. Здесь важно понимать, что мы делим оставшееся пространство не на число элементов, а на сумму значений flex-grow. Так что в нашем случае это 3 (flex-grow: 2 + flex-grow: 1)

178 / 3 = 59.33

оставшеся пространство/сумма значений flex-grow = «один flex-grow»

3. И наконец, доли оставшегося пространства распределяется между всеми элементами

Исходя из их значений flex-grow, section получает две доли (2 * 59.33), а aside — 1 (1 * 59.33). Эти числа добавляются к начальной ширине каждого элемента.

99 + (2 * 59.33) = 217.66 (≈218px)

начальная ширина section + (значение flex-grow у section * «один flex-grow») = новая ширина

623 + (1 * 59.33) = 682.33 (≈682px)

начальная ширина aside + (значение flex-grow у aside * «один flex-grow») = новая ширина

Элементарно, так ведь?

Хорошо, но почему первый демо-пример работает?

Формула получена, и теперь давайте выясним, как нам удалось заполучить фактически нужные числа в первом Codepen, даром что мы действовали совершенно наобум.

родительская ширина: 900px
ширина section: 0px
ширина aside: 0px
сумма значений flex-grow: 3

1. Вычисляем оставшееся пространство

900 - 0 - 0 = 900

2. Определяем, сколько приходится на один flex-grow

900 / 3 = 300

3. Распределяем доли оставшегося пространства

0 + (2 * 300) = 600
0 + (1 * 300) = 300

Если ширина каждого элемента — 0, это оставшееся пространство равно фактической ширине родительского элемента, и создается впечатление, что flex-grow делит ширину родительского элемента на пропорциональные доли..

`flex-grow` и `flex-basis`

Напомню: flex-grow берёт оставшееся пространство и делит его на общее число значений flex-grow. Полученный коэффициент умножается на соответствующее значение flex-grow, и результат добавляется к начальной ширине каждого дочернего элемента.

А если оставшегося пространства нет или вместо начальной ширины элементов нам хочется задействовать установленное нами значение? Можно ли и в этом случае использовать flex-grow?

Конечно, можно. Есть свойство flex-basis, которое определяет начальный размер элемента. Если вы используете flex-basis в сочетании с flex-grow, то способ вычисления ширин меняется.

<‘flex-basis’>. Этот компонент устанавливает отдельное свойство flex-basis и указывает базовый размер: начальный главный размер flex-элемента до распределения свободного пространства в соответствии с flex-grow и flex-shrink.

https://drafts.csswg.org/css-flexbox/#valdef-flex-flex-basis

Элемент, которому задано свойство flex-basis, отличается тем, что в вычислениях мы используем не его начальную ширину, а значение этого свойства.

Я подправил предыдущий пример, добавив к каждому элементу flex-basis. Вот результат.

родительская ширина: 900px
ширина section: 400px (значение flex-basis)
ширина aside: 200px (значение flex-basis)
сумма значений flex-grow: 3

1. Вычисляем оставшееся пространство

900 - 400 - 200 = 300

2. Определяем, сколько приходится на один flex-grow

300 / 3 = 100

3. Распределяем доли оставшегося пространства

400 + (2 * 100) = 600
200 + (1 * 100) = 300

Кстати, совсем не обязательно использовать значения в пикселях и надеяться на авось, проценты тоже годятся.

Работа с боксовой моделью

Чтобы уж точно ничего не бояться, проверим, что произойдёт при добавлении padding и margin. В принципе, ничего особенного. На первом шаге вычисления просто не забывайте вычесть также и отступы.

Единственное, что стоит отметить — что с точки зрения box-sizing поведение flex-basis соответствует свойству width. А значит, при изменении свойства box-sizing изменится вычисление, а следовательно и результаты. Если box-sizing присвоить значение border-box, то в вычислении участвовали бы только значения flex-basis и margin, поскольку padding уже включён в ширину.

Несколько полезных примеров

Ладно, оставим математику. Я покажу несколько примеров, как можно эффективно использовать flex-grow в проектах.

Больше никаких `width: [ x ]%`

Поскольку оставшееся пространство распределяется автоматически, больше не стоит беспокоиться о значениях ширины, если нужно, чтобы наши дочерние элементы заполнили родительский.

See the Pen flex-grow by Manuel Matuzovic (@matuzo) on CodePen.

Резиновая трехколоночная раскладка («Святой Грааль») с фиксированными колонками в пикселях

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

See the Pen Layout using fluid and fixed widths by Manuel Matuzovic (@matuzo) on CodePen.

Заполнение любым элементом оставшегося пространства

Если, к примеру, есть поле ввода рядом с меткой, и нужно, чтобы поле ввода заполняло оставшееся пространство, то больше не требуются уродливые хаки.

See the Pen Filling up the remaining space in a form by Manuel Matuzovic (@matuzo) on CodePen.

Ещё больше примеров можно найти на сайте «Решено с помощью Flexbox» Филипа Уолтона.

Что говорит спецификация

Согласно спецификации, вместо flex-grow нам следует использовать короткую запись flex.

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

https://drafts.csswg.org/css-flexbox/#flex-grow-property

Но будьте осторожны! С простым flex: 1; некоторые примеры выше перестанут работать, поскольку значения, установленные для типичных случаев, не соответствуют значениям по умолчанию, и поэтому могут оказаться не тем, что надо.

Если хотите использовать flex в нашем случае, то лучше указывать его примерно так:

flex: 2 1 auto;  /* (<flex-grow> | <flex-shrink> | <flex-basis>) */

Где можно изучить Flexbox

Если хотите подробнее изучить Flexbox, воспользуйтесь этими ресурсами:

Резюме и усвоенные уроки

flex-grow странный? Неа, ничуть. Нам просто нужно понять как он работает и что делает. Элемент с flex-grow:3 не будет втрое больше элемента с flex-grow:1, а к его начальной ширине добавится в 3 раза больше пикселей, чем к другому элементу.

Я извлёк урок из тестирования flex-grow c двумя пустыми элементами, из-за которого я сначала неправильно понял, как оно работает, и, естественно, пришел было к неправильным выводам. Следует проверять новые возможности в максимально реалистичной среде, чтобы лучше представлять, как они работают и ведут себя.

P.S. Это тоже может быть интересно:

Углубляемся в свойство flex — Еще один блог веб-разработчика

Перевод статьи: Ahmad Shadeed — Digging Into the Flex Property

Вы когда-нибудь задумывались о том, как работает свойство CSS flex? Это сокращение от flex-grow, flex-shrink и flex-base. Самый распространенный вариант использования, который я замечаю в Интернете, — это flex: 1, который позволяет элементу flex расширяться и заполнять доступное пространство.

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

Свойство `Flex-Grow`

flex-grow устанавливает коэффициент роста, который позволяет flex элементу увеличиваться и заполнять доступное пространство. Значение flex-grow принимает только целое число. Обратите внимание на следующее.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
}

Примечание: 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 пикселей.

Надеюсь, теперь стало понятнее.

Можем ли мы использовать 0 как значение `flex-grow`?

Конечно! Поскольку свойство 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 элементов.

.item-2 {
    width: 300px;
    flex-shrink: 1;
}

Браузер сохранит ширину элемента равной 300 пикселей при следующих условиях:

Сумма ширины всех элементов меньше ширины обертки
Ширина области просмотра равна или меньше ширины элемента

Вот как элемент ведет себя с разными размерами области просмотра.

Как вы видите на рисунке, ширина составляет 300 пикселей, пока ширина области просмотра не станет меньше 300 пикселей.

Свойство `Flex-Basis`

Это свойство устанавливает начальный размер flex элемента перед распределением свободного пространства в соответствии с flex коэффициентами. Размер может относиться к ширине по умолчанию и высоте (в случае flex-direction: column).

Свойство flex-basis может принимать те же значения, что и свойства width или height. Значение по умолчанию — auto, которое разрешается в content. Значение content — это автоматический размер, основанный на размере содержимого flex элемента.

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

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

Что будет, если вместо этого использовать 100%? Элемент займет 100% ширины своего родителя, а остальные элементы будут перенесены на новую строку.

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}

Свойство `Flex`

Свойство flex это сокращение от flex-grow, flex-shrink и flex-base. Значение по умолчанию для flex — auto, которое разрешается как flex: 0 1 auto. Это означает, что оно позволяет flex элементам увеличиваться в зависимости от размера их содержимого.

В этом контексте есть кое-что важное, что я хотел бы выделить, а именно абсолютные и относительные flex элементы. Нет, речь идет не о позиционировании CSS, а о том, что связано с flexbox.

Относительный размер flex элементов

.item {
    /* Значение по умолчанию равно: 1 1 auto */
    flex: auto;
}

В этом случае размер flex элементов будет зависить от содержимого. В результате flex элементы с большим количеством содержимого будут больше.

Абсолютный размер flex элементов

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

.item {
    /* Эквивалентно flex: 1 1 0% */
    flex: 1;
}

Что мне нравится в свойстве Flex

Судя по названию, это свойство очень гибкое в принимаемых значениях. Рассмотрим следующие примеры.

Одно значение без указания единиц измерения

.item {
    flex: 1;
}

Если у него есть только одно значение, то это значение будет считаться как flex-grow.

Два значения без указания единиц измерения

.item {
    flex: 1 1;
}

Эти значения будут соответствовать flex-grow и flex-shrink соответственно. По умолчанию для flex-basis будет установлено значение 0.

Одно значение с указанием длины

Это будет использоваться для flex-basis. Для параметров flex-grow и flex-shrink по умолчанию будет установлено значение 1.

.item {
    flex: 100px;
    /* flex: 1 1 100px */
}

Использование 0 без указания единиц измерения

В случаях, когда вам нужно установить flex-basis в ноль, используя сокращение flex.

.item {
    flex: 0;
}

Такое использование не рекомендуется, так как это запутает и разработчика, и браузер. Как вы можете решить, соответствует ли этот 0 коэффициентам flex (grow или shrink) или flex-basis? Это сбивает с толку. Согласно спецификации CSS:

Ноль без указания единиц измерения, которому не предшествуют два коэффициента flex, следует интерпретировать как коэффициент flex. Чтобы избежать неправильного толкования или недопустимых объявлений, авторы должны указать нулевой компонент <’flex-basis’> с единицей измерения или поставить перед ним два фактора flex.

Рекомендуется добавить единицу измерения, например px или %.

.item {
    flex: 0%;
    /* flex: 1 1 0% */
}

Случаи использования

Аватар пользователя

Типичный вариант использования flexbox — пользовательский компонент. Аватар и текстовое содержимое должны находиться в одной строке.

<div>
	<img src="shadeed.jpg" alt="" />
	<div>
		<h4>Ahmad Shadeed</h4>
		<p>Author of Debugging CSS</p>
	</div>
</div>

.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

Обратите внимание, что я добавил для аватара flex: 0 0 70px. Это важно, поскольку в некоторых старых браузерах изображение может выглядеть сжатым, если не установлен параметр flex. Кроме того, flex имеет более высокий приоритет, чем свойство width (в случае flex-direction: row) или height (в случае flex-direction: column).

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

.user__avatar {
    /* width будет 100px, а не 70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

У вас есть title для заголовка раздела, и он должен занимать все доступное пространство. В этом случае идеально подходит flex: 1.

.page-header {
    display: flex;
    flex-wrap: wrap;	
}

.page-header__title {
    flex: 1;
}

Элемент Input для отправки сообщений

Это очень распространено в приложениях для обмена сообщениями, таких как Facebook Messenger или Twitter. Входные данные должны заполнять доступное пространство с фиксированной шириной для кнопки отправки.

form {
    display: flex;
    flex-wrap: wrap;	
}

input {
    flex: 1;
    /* Другие стили */
}

Приведенные выше примеры являются полезными примерами использования flex-grow. Однако некоторые случаи игнорируются или вообще не упоминаются в некоторых статьях по flex. Давайте рассмотрим их!

Выравнивание элементов на двух картах

Предположим, что CSS-сетка имеет макет из двух столбцов. Проблема в том, что положение дат не совпадают. Они должны быть на одной линии (красной).

Мы можем сделать это с помощью flexbox.

<div>
	<img src="thumb.jpg" alt="">
	<h4>Title short</h4>
	<time></time>
</div>

Устанавливая flex-direction: column мы можем использовать flex-grow для заголовка, чтобы он заполнял доступное пространство и, таким образом, размещал дату в конце, даже если заголовок короткий.

.card {
    display: flex;
    flex-direction: column;
}

/* Первое решение */
.card__title {
    flex-grow: 1;
}

Кроме того, это возможно без использования flex-grow. Благодаря auto margins и flexbox! Я написал подробную статью об auto в CSS, если вы хотите вникнуть в подробности.

/* Второе решение */
.card__date {
    margin-top: auto;
}

Сценарии использования — более одного фактора гибкости

Здесь я имею в виду использование flex-grow или flex-shrink, но со значением, отличным от 1. В этом разделе я рассмотрю некоторые идеи использования.

Вдохновленный Facebook (я тоже украл значки), этот нижний колонтитул (footer) действий состоит из четырех элементов, а последний имеет меньшую ширину. Мы можем сделать это следующим образом:

.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}

Расширяющая анимацию

Мы можем сделать интересную вещь — анимировать flex элемент при наведении курсора. Это может быть чрезвычайно полезно. Вот простой пример этого:

.palette {
    display: flex;
    flex-wrap: wrap;
}

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}

Расширение тарифного плана

Мне нравится демонстрация на Codepen. Как только card активирована, она расширяется, изменяя flex-grow на 4.

Когда контент больше, чем его оболочка

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

.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}

Однако даже с flex: 1 изображения все равно выходят за пределы оболочки. Согласно спецификации CSS:

По умолчанию flex элементы не сжимаются меньше своего минимального размера содержимого (длины самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство min-width или min-height.

В нашем случае изображения слишком большие, и flexbox не сжимает их, чтобы поместиться в оболочку. Чтобы изменить это поведение, нам нужно установить следующее:

.wrapper img {
    flex: 1;
    min-width: 0;
}

Я объяснил эту проблему в своей статье о минимальной и максимальной width / height в CSS.

Заключение

Вот и все. Я объяснил основы свойств flex и объяснил, как их использовать. Надеюсь, вы узнали что-то новое из этой статьи. У вас есть комментарий или предложение? Пожалуйста, напишите мне на @shadeed9.

Спасибо за чтение.

Я пишу электронную книгу

Рад сообщить вам, что я пишу электронную книгу об Debugging CSS.

Если вам интересно, перейдите на debuggingcss.com и подпишитесь на обновления о книге.

Ресурсы и дополнительная информация

Была ли вам полезна эта статья?

[2 / 4.5]

Управление элементами. flex-basis, flex-shrink и flex-grow

Последнее обновление: 18.04.2017

Кроме свойств, устанавливающих выравнивание элементов относительно границ flex-контейнера, есть еще три свойства, которые позволяют управлять элементами:

flex-basis: определяет начальный размер flex-элемента

flex-shrink: определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере

flex-grow: определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере

flex-basis

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

Это свойство может принимать следующие значения:

auto: начальный размер flex-элемента устанавливается автоматически

content: размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать

числовое значение: мы можем установить конкретное числовое значение для размеров элемента

Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
			}
			.item1 {background-color: #675BA7; flex-basis: auto; width:150px;}
			.item2 {background-color: #9BC850; flex-basis: auto; width:auto;}
			.item3 {background-color: #A62E5C; flex-basis: 200px;width:150px;}
        </style>
    </head>
    <body>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
</html>

У первого элемента у свойства flex-basis установлено значение auto. Поэтому первый элемент в качестве реального значения для ширины будет использовать
значение свойства width.

У второго элемента у свойства flex-basis установлено значение auto, однако и свойство width имеет значение auto. Поэтому реальная ширина элемента будет устанавливаться
по его содержимому.

У третьего элемента свойство flex-basis имеет конкретное значение, которое и используется. А свойство width в этом случае уже не играет никакой роли.

flex-shrink

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

В качестве значения свойство принимает число. По умолчанию его значение 1.

Рассмотрим действие этого свойства на примере:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
				width:400px;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
			}
			.item1 {background-color: #675BA7; flex-basis: 200px; flex-shrink:1;}
			.item2 {background-color: #9BC850; flex-basis: 200px; flex-shrink:2;}
			.item3 {background-color: #A62E5C; flex-basis: 200px; flex-shrink:3;}
        </style>
    </head>
    <body>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
</html>

В данном случае начальная ширина каждого элемента равна 200px, то есть совокупная ширина составляет 600px. Однако ширина flex-контейнера составляет всего
400px. То есть размер контейнера недостаточен для вмещения в него элементов, поэтому в действие вступает свойство flex-shrink, которое определено у элементов.

Для усечения элементов браузер вычисляет коэффициент усечения (shrinkage factor). Он вычисляется путем перемножения значения свойства
flex-basis на flex-shrink. Таким образом, для трех элементов мы получим следующие вычисления:


// первый элемент
200px * 1 = 200
// второй элемент
200px * 2 = 400
// третий элемент
200px * 3 = 600

Таким образом, мы получаем, что для второго элемента коэффициент усечения в два раза больше, чем коэффициент для первого элемента. А для третьего элемента коэффициент больше в три раза,
чем у первого элемента. Поэтому в итоге первый элемент при усечении будет в три раза больше, чем третий и в два раза больше, чем второй.

flex-grow

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

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

Итак, используем свойство flex-grow:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.3em;
				color: white;
			}
			.item1 {background-color: #675BA7; flex-grow:0;}
			.item2 {background-color: #9BC850; flex-grow:1;}
			.item3 {background-color: #A62E5C; flex-grow:2;}
        </style>
    </head>
    <body>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
</html>

Итак, для каждого элемента есть базовые начальные размеры. Здесь явным образом размеры для элементов не указаны, поэтому размер каждого элемента
в данном случае будет складываться из размеров внутреннего содержимого, к которым добавляются внутренние отступы.

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

Так как у первого элемента свойство flex-grow равно 0, то первый элемент будет иметь константные постоянные размеры.
У второго элемента flex-grow равно 1, а третьего — 2. Таким образом, в сумме они дадут 0 + 1 + 2 = 3. Поэтому второй элемент будет увеличиваться на 1/3 дополнительного пространства, на которое растягивается контейнер, а третий элемент будет получать
2/3 дополнительного пространства.

Свойство flex

Свойство flex является объединением свойств flex-basis, flex-shrink и flex-grow и имеет следующий формальный синтаксис:

flex: [flex-grow] [flex-shrink] [flex-basis]

По умолчанию свойство flex имеет значение 0 1 auto.

Кроме конкретных значений для каждого из подсвойств мы можем задать для свойства flex одно из трех общих значений:

flex: none: эквивалентно значению 0 0 auto, при котором flex-элемент не растягивается и не усекается при увеличении и уменьшении контейнера

flex: auto: эквивалентно значению 1 1 auto

flex: initial: эквивалентно значению 0 1 auto

Так, применим свойство flex:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
				width: 600px;
			}
			.flex-item {
				text-align:center;
				font-size: 16px;
				padding: 10px 0;
				color: white;
			}
			.item1 {background-color: #675BA7; width: 150px; flex: 0 0 auto }
			.item2 {background-color: #9BC850; width: 150px; flex: 1 0 auto;}
			.item3 {background-color: #A62E5C; width: 150px; flex: 0 1 auto;}
			.item4 {background-color: #2A9FBC; width: 150px; flex: 1 1 auto;}
        </style>
    </head>
    <body>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
</html>

Здесь каждый элемент имеет начальную ширину в 150 пикселей, так как у всех элементов свойство flex-basis имеет значение 0, что в целом для всех элементов будет составлять 600 пикселей.

При сжатии контейнера будут уменьшаться 3-й и 4-й элементы, так как у них свойство flex-shrink больше нуля. И так как у обоих элементов это свойство равно 1,
то оба элемента будут уменьшаться в равных долях.

При растяжении контейнера будут увеличиваться 2-й и 4-й элементы, так как у этих элементов свойство flex-grow больше нуля. И также, так как это свойство равно 1, то
эти элементы будут увеличиваться в равных долях.

Учебник CSS 3. Статья «Верстка по Flexbox. Часть 2.»

В этой cтатье мы с Вами продолжим изучать вопросы, касающиеся современной нативной верстки страниц сайта с помощью каскадных таблиц стилей с использованием модели Flexbox.

В предыдущей статье мы научились работать и производить всевозможные настройки флекс контейнеров с использованием современных CSS свойств, но этого недостаточно для того, чтобы решать многие задачи, связанные с версткой сайта.

Сейчас мы рассмотрим методы работы непосредственно с флекс элементами, научимся определять порядок их
отображения в контейнере, научимся вертикально выравнивать конкретный флекс элемент, рассмотрим как указать относительную ширина флекс элемента, ширину флекс элемента по умолчанию и еще некоторые необходимые приемы работы с флекс элементами.

Порядок следования элементов

В этом разделе мы с Вами рассмотрим как с использованием Flexbox верстки задать порядок следования элементов внутри родительского элемента, что позволит простым способом решать сложные казалось бы задачи. CSS свойство order позволяет установлить порядок следования флекс элемента в контейнере относительно остальных.

Если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство order, и любые свойства, предназначенные для работы с флекс элементами не окажут на такие элементы никакого эффекта.

Обращаю Ваше внимание, что если вы указываете значение свойства order для одного флекс элемента в контейнере, то это не будет являться его порядковым номером, а указывает только на «вес» его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0.

Схематичное отображение работы свойства order отображено на следующем изображении:

Рис. 218 Схематичное отображение работы CSS свойства order

В этом учебнике мы уже неоднократно сталкивались со свойством z-index, благодаря которому, вы можете управлять видимостью элементов по оси z, принцип указания значений свойства order аналогичен. Вы можете использовать в своей работе любые значения, которые будут вам интуитивно понятны, например, 100, 200, 300 и тому подобные.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Пример изменения следования элементов в колоннах</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
}
div > div { 
	width: 50px; /* устанавливаем ширину блока */
	height: 50px;  /* устанавливаем высоту блока */
	color: #fff;  /* цвет текста */
	margin: 1px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
} 
.container div:nth-of-type(4) { /* выбираем четвертый <div> в первом контейнере */ 
	order: -1;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
.container2 div:nth-of-type(4) { /* выбираем четвертый <div> во втором контейнере */ 
	order: 1;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
.container3 div:nth-of-type(4) { /* выбираем четвертый <div> в третьем контейнере */ 
	order: 2;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
</style>
</head>
	<body>
		<p>order: -1;</p>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<p>order: 1;</p>
		<div class = "container2">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<p>order: 2;</p>
		<div class = "container3">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по пять элементов <div>. С использованием псевдокласса :nth-of-type() указали для каждого четвертого элемента в определенном контейнере следующие значения свойства order:

Для элемента в первом контейнере значение -1, что позволяет сместить элемент к левому краю родительского контейнера относительно остальных элементов, которые по умолчанию имеют значение 0 свойства order.
Для элемента во втором контейнере значение 1, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов.
Для элемента в третьем контейнере значение 2, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов. Еще раз обращаю Ваше внимание, что значение не является его порядковым номером, мы могли указать значение 100, 200, 500, элемент не изменит своей позиции так как другие элементы в контейнере имеют значение этого свойства равное 0.

Результат примера:

Пример изменения следования элементов в колоннах.

В следующем примере мы рассмотрим как происходит изменение следования элементов внутри колонн:

<!DOCTYPE html>
<html>
<head>
	<title>Пример изменения следования элементов в колоннах</title>
<style> 
.container {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	flex-direction: column; /* флекс элементы отображаются вертикально как колонны (формируются сверху вниз) */
}
.container:hover {
	flex-direction: column-reverse; /* флекс элементы отображаются вертикально как колонны (формируются снизу вверх) */
}
div > div {
	height: 50px;  /* устанавливаем высоту блока */
	color: #fff;  /* цвет текста */
	margin: 1px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
} 
.container div:nth-of-type(5) { /* выбираем пятый <div> в  контейнере */ 
	order: -100;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */
}
.container div:nth-of-type(1) { /* выбираем первый <div> в  контейнере */ 
	order: 100;  /* определяем порядок следования флекс элемента */
	background: forestgreen;  /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
	</body>
</html>

В этом примере мы установили, что элементы внутри блочного флекс контейнера отображаются вертикально как колонны, формируясь сверху вниз (свойство flex-direction со значением column). В этом случае свойство order будет определять порядок следования элементов сверху вниз (элементы с меньшим номером будут отображаться выше, а с большим соответственно ниже).

Для первого элемента <div> с помощью псевдокласса :nth-of-type() мы установили значение свойства order равное 100, что позволило сместить его в конец всех элементов, а пятому элементу указали значение свойства order равное -100, что позволило сместить его влево перед всеми элементами.

Кроме того, мы указали, что при наведении на контейнер указателем мыши мы изменяем формирование колонны с сверху вниз на снизу вверх (свойство flex-direction со значением column-reverse). Обратите внимание, что в этом случае порядок следования элементов в колоннах изменяется на противоположный. Вы можете открыть пример в отдельном окне для демонстрации.

Результат примера:

Пример изменения следования элементов в колоннах

Вертикальное выравнивание флекс элемента

В предыдущей cтатье «Верстка по Flexbox. Часть 1.» мы с Вами рассмотрели как можно произвести выравнивание всех элементов внутри флекс контейнера. Но как быть, если какой то флекс элемент необходимо выровнять по особенному? На помощь нам приходит свойство align-self, которое задает выравнивание отдельных элементов строки внутри флекс контейнера. Кроме того, это свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу.

Обращаю Ваше внимание, что если для флекс элемента установлено свойство margin (внешние отступы) со значением auto, то свойство align-self будет игнорировано.

Схематичное отображение работы свойства align-self отображено на следующем изображении:

Рис. 221 Схематичное отображение работы свойства align-self

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства align-self</title>
<style> 
.container {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	height: 250px;  /* устанавливаем высоту контейнера */
	background: rgba(0,150,208,.2); /* цвет заднего фона */
	align-items: center; /*	флекс элементы располагаются по центру контейнера (середина поперечной оси). */
}
.container > div {  /* устанавливаем стили для элементов <div>, вложенных в контейнер */
	width: 20%;  /* устанавливаем ширину блока */
	color: #fff;  /* цвет текста */
	margin: 0 5px;  /* внешние отступы */
	background: rgb(0,150,208);  /* цвет заднего фона */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1) { /* выбираем первый <div> в  контейнере */ 
	align-self: auto;  /* флекс элемент наследует значение его родительского контейнера */
}
.container div:nth-of-type(2) { /* выбираем второй <div> в  контейнере */ 
	align-self: stretch;  /* флекс элемент растягивается по размеру строки флекс контейнера вдоль поперечной оси */
}
.container div:nth-of-type(3) { /* выбираем третий <div> в  контейнере */ 
	align-self: flex-start;  /* флекс элемент располагается в начале строки флекс контейнера (начало поперечной оси) */
}
.container div:nth-of-type(4) { /* выбираем четвертый <div> в  контейнере */ 
	align-self: flex-end;  /* флекс элемент располагается в конце строки флекс контейнера (конец поперечной оси) */
}
.container div:nth-of-type(5) { /* выбираем пятый <div> в  контейнере */ 
	align-self: baseline;  /* флекс элемент распологаются по его базовой линии строки флекс контейнера */
}
</style>
</head>
	<body>
		<div class = "container">
			<div>auto (наследует center)</div>
			<div>stretch</div>
			<div>flex-start</div>
			<div>flex-end</div>
			<div>baseline</div>
		</div>
	</body>
</html>

В этом примере мы создали блочный флекс контейнер, внутри которого мы разместили пять элементов <div> шириной 20% от родительского контейнера. С помощью свойства align-items указали, что все флекс элементы располагаются по центру контейнера (середина поперечной оси).

С использованием псевдокласса :nth-of-type() указали для каждого элемента свое значение свойства align-self.

Для первого элемента <div> мы установили значение auto (значение по умолчанию), что позволило унаследовать значение от родительского элемента, в данном случае это выполнено лишь для демонстрации, так как это не влияет на конечное отображение.

Для второго элемента <div> мы установили, что флекс элемент растягивается по размеру строки флекс контейнера вдоль поперечной оси. Если для контейнера не задано значение отличное от stretch, то именно это значение будет унаследовано.

Третий элемент располагается в начале строки флекс контейнера (начало поперечной оси), а четвертый располагается в конце строки флекс контейнера (конец поперечной оси).

Пятый флекс элемент располагается по его базовой линии строки флекс контейнера.

Результат примера:

Рис. 222 Пример использования свойства align-self

Увеличение относительной ширины флекс элемента

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

Определить на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере доступно с помощью свойства flex-grow.

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

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-grow</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	height: 100px;  /* устанавливаем высоту для контейнеров */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1),
.container div:nth-of-type(3),
.container2 div:nth-of-type(1),
.container2 div:nth-of-type(3),
.container3 div:nth-of-type(1),
.container3 div:nth-of-type(3) {
	flex-grow: 1;  /* блок будет увеличен на 1 по отношению к остальным флекс элементам */
} 
.container div:nth-of-type(2) {
	flex-grow: 2;  /* блок будет увеличен на 2 по отношению к остальным флекс элементам */
} 
.container2 div:nth-of-type(2) {
	flex-grow: 3;  /* блок будет увеличен на 3 по отношению к остальным флекс элементам */
} 
.container3 div:nth-of-type(2) {
	flex-grow: 4;  /* блок будет увеличен на 4 по отношению к остальным флекс элементам */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>1</div>
			<div>2</div>
			<div>1</div>
		</div>
		<div class = "container2">
			<div>1</div>
			<div>3</div>
			<div>1</div>
		</div>
		<div class = "container3">
			<div>1</div>
			<div>4</div>
			<div>1</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. С использованием псевдокласса :nth-of-type() указали для каждого первого и третьего элемента в каждом контейнере, что блок будет увеличен на 1 по отношению к остальным флекс элементам. Для каждого второго элемента в контейнерах указали различные значения свойства flex-grow.

В первом контейнере второй элемент будет увеличен на 2 по отношению к остальным флекс элементам, во втором контейнере на 3, а в третьем уже на четыре. Обратите внимание, как пропорцианально изменятся ширина элементов, не прибегая с нашей стороны к каким-либо расчетам, или использованию дополнительных функций.

Результат примера:

Рис. 223 Пример использования свойства flex-grow

Размер флекс элемента по умолчанию

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

В отличии от свойства flex-grow используются как абсолютные значения (px, em, pt и так далее), так и значения в процентах, а не относительные значения, при этом отрицательные значения не допускаются. Значением по умолчанию является значение auto (размер равен размеру флекс элемента). Если элемент не имеет заданного размера, то размер будет высчитываться в зависимости от содержания флекс элемента.

Это свойство чем то похоже, на свойство определяющее минимальную ширину элемента (min-width), но в отличии от него свойство flex-grow не вызывает переполнение родительского элемента в том случае, если минимальный размер будет превышать размеры родительского элемента, а пропорционально уменьшает размер элемента. Другими словами это свойство определяет минимальный размер флекс элемента, который при необходимости может быть уменьшен, или увеличен.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-basis</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	height: 95px;  /* устанавливаем высоту для контейнеров */
	background: rgba(0,150,208,.3);  /* цвет заднего фона */
	margin-bottom: 5px;  /* внешние отступы снизу */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1),
.container div:nth-of-type(3),
.container2 div:nth-of-type(1),
.container2 div:nth-of-type(3),
.container3 div:nth-of-type(1),
.container3 div:nth-of-type(3) {
	flex-basis: auto;  /* размер будет высчитываться в зависимости от содержания элемента */
} 
.container div:nth-of-type(2) {
	flex-basis: 100px;  /* размер для флекс элемента по умолчанию составляет 100px */
} 
.container2 div:nth-of-type(2) {
	flex-basis: 200px;  /* размер для флекс элемента по умолчанию составляет 200px */
} 
.container3 div:nth-of-type(2) {
	flex-basis: 10000px;  /* размер для флекс элемента по умолчанию составляет 10000px */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>auto</div>
			<div>100px</div>
			<div>auto</div>
		</div>
		<div class = "container2">
			<div>auto</div>
			<div>200px</div>
			<div>auto</div>
		</div>
		<div class = "container3">
			<div>auto</div>
			<div>10 000px</div>
			<div>auto</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. С использованием псевдокласса :nth-of-type() указали для каждого первого и третьего элемента в каждом контейнере, что их размер будет высчитываться в зависимости от содержания элемента. Для каждого второго элемента в контейнерах указали различные значения свойства flex-basis.

В первом контейнере указали для второго флекс элемента размер по умолчанию 100px, во втором контейнере 100px, а в третьем уже 10000px. Обратите внимание, что в третьем контейнере элемент не смотря на его размеры не вызвал переполнение, а подстроился под оставшееся в родительском контейнере пространство.

Результат примера:

Рис. 224 Пример использования свойства flex-basis

Уменьшение относительной ширины флекс элемента

Ранее мы с Вами рассмотрели как с помощью свойства flex-grow указать относительную ширину для флекс элементов и определить на сколько элемент может увеличиться по отношению к остальным флекс элементам. В CSS доступно и другое поведение для флекс элементов, при котором флекс элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства). За эту возможность отвечает свойтво flex-shrink.

Значение, определяющее на сколько будет уменьшен блок по отношению к остальным флекс элементам в контейнере (при недостатке свободного пространства) задается по аналогии со свойством flex-grow, но при этом значением по умолчанию будет 1, а не 0. Отрицательные значения так же не допускаются (не валидны).

Свойство flex-shrink со значением 0 определяет, что элемент не будет сжиматься, сохраняя при этом необходимую ширину элемента! Если вместе с этим значением указано минимальное значение ширины флекс элемента по умолчанию (свойство flex-basis), то элемент не сможет уменьшиться меньше этого значения. Используйте эту возможность осмысленно, так как существует вероятность переполнения содержимого флекс контейнера. Этот момент мы рассмотрим в конце статьи

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-shrink</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	width: 400px;  /* устанавливаем ширину для контейнеров */
	height: 95px;  /* устанавливаем высоту для контейнеров */
	background: rgba(0,150,208,.3);  /* цвет заднего фона */
	margin-bottom: 5px;  /* внешние отступы снизу */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
	flex-basis: 200px;  /* размер для флекс элемента по умолчанию составляет 200px */
} 
.container div:nth-of-type(2) {
	flex-shrink: 2;  /* блок будет уменьшен на 2 по отношению к остальным флекс элементам (при недостатке пространства) */ 
} 
.container2 div:nth-of-type(2) {
	flex-shrink: 3;  /* блок будет уменьшен на 3 по отношению к остальным флекс элементам (при недостатке пространства) */ 
} 
.container3 div:nth-of-type(2) {
	flex-shrink: 4;  /* блок будет уменьшен на 4 по отношению к остальным флекс элементам (при недостатке пространства) */ 
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>1</div>
			<div>2</div>
			<div>1</div>
		</div>
		<div class = "container2">
			<div>1</div>
			<div>3</div>
			<div>1</div>
		</div>
		<div class = "container3">
			<div>1</div>
			<div>4</div>
			<div>1</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. Для контейнера мы задали ширину равную 400 пикселей, а для каждого вложенного флекс элемента с помощью свойства flex-basis указали размер по умолчанию равный 200px. Это было сделано для того, чтобы смоделировать ситуацию, при которой элемент у которого значение свойства flex-shrink больше остальных сжимался.

С использованием псевдокласса :nth-of-type() указали для каждого второго элемента в контейнерах различные значения свойства flex-shrink.
В первом контейнере второй элемент при недостатке пространства будет уменьшен на 2 по отношению к остальным флекс элементам, во втором контейнере на 3, а в третьем уже на четыре и всё это проиходит автоматически, не прибегая с нашей стороны к каким-то усилиям.

Результат примера:

Рис. 225 Пример использования свойства flex-shrink

Универсальное свойство flex

CSS свойство flex является короткой записью для свойств, которые позволяют определить размер для флекс элемента, установленный по умолчанию, указать на сколько элемент может увеличиться и уменьшиться по отношению к остальным флекс элементам в одном контейнере, а именно:

flex-grow (значение по умолчанию 0).
flex-shrink (значение по умолчанию 1).
flex-basis (значение по умолчанию auto).

Обратите внимание на некоторые нюансы использования свойства flex:

Если указывается одно числовое значение, то оно устанавливается для свойства flex-grow, если указаны единицы измерения CSS, то соответственно для flex-basis.
Если второе значение соответствует числовому значению, то оно устанавливается для flex-shrink, а если указаны единицы измерения CSS, то для flex-basis.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex</title>
<style> 
* {
	margin: 0;  /* внешние отступы со всех сторон отсутствуют */
	color: #fff;  /* цвет текста */
}
.content {    
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	height: calc(100vh - 200px);  /* высчитываем высоту для элемента */
	background: #999;  /* цвет заднего фона */
}
section {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
}
header, footer {
	height: 100px;  /* устанавливаем высоту для элементов */
	background: #777;  /* цвет заднего фона */
}
aside {
	flex: 1;  /* указываем на сколько элемент может увеличиться по отношению к остальным флекс элементам (flex-grow) */
}
main {
	background: #aaa;  /* цвет заднего фона */
	flex: 5 0 450px;  /* grow shrink basis */
}
section > div {  
	background: #333;  /* цвет заднего фона */
	margin: 5px;  /* внешние отступы со всех сторон */
	flex: 1 1 100px;  /* grow shrink basis */
	height: 100px;  /* устанавливаем высоту для элементов */
} 
</style>
</head>
	<body>
		<header>header</header>
		<div class = "content">
			<aside>aside</aside>
			<main>main
				<section>
					<div>div</div>
					<div>div</div>
					<div>div</div>
					<div>div</div>
				</section>
			</main>
			<aside>aside</aside>
		</div>
		<footer>footer</footer>
	</body>
</html>

В этом примере мы:

Разместили элемент <header> вверху страницы и <footer> внизу страницы, указали для них высоту равную 100 пикселям и определенный цвет заднего фона.
Элементу <div> с классом content указали, что он является блочным флекс контейнером и задали высоту, которая высчитывается с помощью функции calc() (100vh (viewport height) 100% от высоты области просмотра минус 200px, которые мы задали для элементов <header> и <footer>). Внутри контейнера мы разместили три флекс элемента: два элемента <aside> и один элемент <main>.
Для флекс элементов <aside> мы указали, что они будут увеличены на 1 по отношению к остальным флекс элементам, а элементу <main> указали значение 5, то есть он будет занимать 5 из 7 частей внутри контейнера (свойство flex-grow). Кроме того, внутри универсального свойства flex мы указали элементу <main> значение 0 свойства flex-shrink, и указали ширину элемента по умолчанию равную 450px (flex-basis). При таком сочетании свойств это означает, что элемент не будет сжиматься и его ширина не сможет уменьшится меньше 450 пикселей, что приведет при недостатке пространства к переполнению флекс контейнера.
Внутри флекс элемента <main> мы разместили элемент <section>, которому мы указали, что он является блочным флекс контейнером. Внутри него мы разместили четыре флекс элемента <div>. Для них мы указали, что они будут увеличены на 1 по отношению к остальным флекс элементам (свойство flex-grow), при недостатке пространства элементы будут уменьшены на 1 по отношению к остальным флекс элементам (значение по умолчанию свойства flex-shrink), и указали ширину элементов по умолчанию равную 100px (свойство flex-basis).

Результат примера:

Рис. 226 Пример использования свойства flex

CSS свойство flex-grow

Пример

Пусть второй flex-элемент вырастет в три раза шире остальных:

div: nth-of-type (1) {flex-grow: 1;}
div: nth-of-type (2) {flex-grow: 3;}
div: nth-of-type (3) {flex-grow: 1;}

Попробуй сам »

Определение и использование

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

Примечание: Если элемент не является гибким, свойство flex-grow не действует.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Объект
гибкий рост	29.0 21.0 -webkit-	11,0	28,0 18,0 -моз-	9,0 6,1 -webkit-	17,0

Синтаксис CSS

flex-grow: номер | начальный | наследование;

Стоимость недвижимости

Значение	Описание	Сыграй
номер	Число, определяющее, насколько элемент будет расти относительно остальных гибких элементов.Значение по умолчанию — 0	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать примерно начальная	Играй »
наследовать	Наследует это свойство от своего родительского элемента. Прочитать про наследство

Связанные страницы

Учебное пособие по CSS: CSS Flexible Box

Ссылка CSS: свойство flex

Ссылка CSS: свойство flex-basic

Ссылка CSS: свойство flex-direction

Ссылка CSS: свойство flex-flow

Ссылка CSS: свойство flex-shrink

Ссылка CSS: свойство flex-wrap

Ссылка на HTML DOM: свойство flexGrow

CSS свойство flex-flow

Пример

Сделайте отображение гибких элементов в обратном порядке и при необходимости оберните:

div {
дисплей: гибкий;
flex-flow: заворачивание ряда-обратного;
}

Попробуй сам »

Определение и использование

Свойство flex-flow является сокращенным свойством для:

Примечание: Если элементы не являются гибкими, свойство flex-flow не действует.

Значение по умолчанию:	ряд nowrap
Унаследовано:	нет
Анимируемое:	нет. Прочитать о animatable
Версия:	CSS3
Синтаксис JavaScript:	объект .style.flexFlow = «столбец nowrap» Попробуй это

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Объект
гибкий поток	29,0 21,0 -вебкит-	11,0	28,0 18,0 -моз-	9,0 6,1 -вебкит-	17,0

Синтаксис CSS

flex-flow: flex-direction flex-wrap | начальный | наследование;

Стоимость недвижимости

Значение	Описание	Играй
изгиб	Возможные значения: строка обратная строка столбец обратная строка начальная наследование Значение по умолчанию — «строка». Указание направления гибких элементов	Играй »
гибкая пленка	Возможные значения: nowrap wrap wrap-reverse initial inherit Значение по умолчанию — nowrap. Указание, следует ли оборачивать гибкие элементы	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию.Читать про начальный	Играй »
унаследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебное пособие по CSS: CSS Flexible Box

Ссылка CSS: свойство flex

Ссылка CSS: свойство flex-direction

Ссылка CSS: свойство flex-wrap

Ссылка CSS: свойство flex-basic

Ссылка CSS: свойство flex-grow

Ссылка CSS: свойство flex-shrink

Ссылка на HTML DOM: свойство flexFlow

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Flex grow css: flex-grow | CSS | WebReference

flex-grow | CSS | WebReference

Краткая информация

Обозначения

Значения

Пример

Примечание

Спецификация

Браузеры

Автор и редакторы

Свойство flex-grow | CSS справочник

HTML

CSS

JavaScript

jQuery

CSS свойства

flex-grow | CSS справочник

Поддержка браузерами

Описание

Синтаксис

Значения свойства

Пример

flex-grow странный. Так ли это? — CSS-LIVE

Как flex-grow не работает

Как flex-grow действительно работает

Объяснение

Демонстрация

Вычисление

Хорошо, но почему первый демо-пример работает?

flex-grow и flex-basis

Работа с боксовой моделью

Несколько полезных примеров

Больше никаких width: [ x ]%

Резиновая трехколоночная раскладка («Святой Грааль») с фиксированными колонками в пикселях

Заполнение любым элементом оставшегося пространства

Что говорит спецификация

Где можно изучить Flexbox

Резюме и усвоенные уроки

P.S. Это тоже может быть интересно:

Углубляемся в свойство flex — Еще один блог веб-разработчика

Свойство Flex-Grow

Множественные flex-grow

Можем ли мы использовать 0 как значение flex-grow?

Flex Grow не делает Flex элементы одинаковыми

Свойство Flex-Shrink

Свойство Flex-Basis

Свойство Flex

Относительный размер flex элементов

Абсолютный размер flex элементов

Что мне нравится в свойстве Flex

Одно значение без указания единиц измерения

Два значения без указания единиц измерения

Одно значение с указанием длины

Использование 0 без указания единиц измерения

Рекомендуется использовать сокращение flex

Случаи использования

Аватар пользователя

Элемент Input для отправки сообщений

Выравнивание элементов на двух картах

Сценарии использования — более одного фактора гибкости

Расширяющая анимацию

Расширение тарифного плана

Когда контент больше, чем его оболочка

Заключение

Я пишу электронную книгу

Ресурсы и дополнительная информация

Управление элементами. flex-basis, flex-shrink и flex-grow

Управление элементами. flex-basis, flex-shrink и flex-grow

flex-basis

flex-shrink

flex-grow

Свойство flex

Учебник CSS 3. Статья «Верстка по Flexbox. Часть 2.»

Порядок следования элементов

Вертикальное выравнивание флекс элемента

Увеличение относительной ширины флекс элемента

Размер флекс элемента по умолчанию

Уменьшение относительной ширины флекс элемента

Универсальное свойство flex

CSS свойство flex-grow

Как flex-grow действительно* работает*

`flex-grow` и `flex-basis`

Больше никаких `width: [ x ]%`

Свойство `Flex-Grow`

Множественные `flex-grow`

Можем ли мы использовать 0 как значение `flex-grow`?

Свойство `Flex-Shrink`

Свойство `Flex-Basis`

Свойство `Flex`