css flex ширина блока

Здравствуйте. Начал разбираться с flexbox, столкнулся со следующим.

Блок (block), внутри него элементы (item), расположенные по вертикали, внутри элемента два элемента (left-subitem и right-subitem), расположенные горизонтально и должны быть равные по ширине, т.к. у обоих flex-grow: 1;

Но получаются не равные:

Элемент, в котором длинее текст (зеленый) получается длиннее. Что я делаю не так?

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

? ||	flex — это сокращённая запись трёх свойств, значения по умолчанию которых: flex-grow: 0; flex-shrink: 1; flex-basis: auto;
none	0 0 auto
initial	0 1 auto
inherit	наследует значение родителя
unset	0 1 auto

Пример вёрстки Flexbox:

flex-basis : исходный размер flex-элемента

auto см. width / height content не поддерживается браузерами initial auto inherit наследует значение родителя unset auto

Если flex-direction имеет значения row или row-reverse , то flex-basis определяет ширину flex-элемента (заменяет свойство width ), если column или column-reverse — высоту flex-элемента (заменяет свойство height ).

Свойства width / height игнорируются, если flex-basis не имеет значение auto .

Свойство flex-basis имеет преимущество перед width / height в удобной записи в одну строку в составе свойства flex . При overflow: visible; (по умолчанию) есть отличие при переполнении flex-элемента (искл., IE):

Свойство flex-basis взаимодействует с box-sizing также как width / height в блочной модели:

Как работает свойство flex :

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

flex-basis:

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

initial 0 inherit наследует значение родителя unset 0

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

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

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

initial 1 inherit наследует значение родителя unset 1

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

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

Flex-элемент не будет ограничен рамками родителя, когда flex-basis / width / height примут значение auto , а flex-shrink / max-width / max-height — 0 (искл., Mozilla Firefox).

Когда длину задаёт flex-basis , а не max-width / max-height / width / height при overflow: visible; (по умолчанию) flex-shrink сожмёт flex-элемент настолько, насколько позволит ему содержимое flex-элемента.

Распределение пространства flex-контейнера в цифрах

Flex-элементы имеют относительную связь друг с другом

Как рассчитывается ширина элементов в flex-контейнере:

Если flex-элементы не заполняют всё пространство flex-контейнера, то сперва определяется свободное пространство в flex-контейнере (flex-контейнер — ( flex-basis + flex-basis + flex-basis )) , затем оно увеличивает flex-элементы согласно заявленным в flex-grow долям

Как рассчитывается ширина элементов в flex-контейнере:

Ширина/высота flex-элемента не превышает значения свойств max-width / max-height

Как рассчитывается ширина элементов в flex-контейнере:

Если размера flex-контейнера не хватает для flex-элементов, то сперва определяется сколько требуется пространства ( flex-basis + flex-basis + flex-basis — flex-контейнер) , затем оно уменьшает flex-элементы согласно заявленным в flex-shrink долям

Как рассчитывается ширина элементов в flex-контейнере:

Ширина/высота flex-элемента не может быть менее значения свойств min-width / min-height

Как рассчитывается ширина элементов в flex-контейнере:

В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.

Назначение CSS Flexbox

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

CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.

Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.

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

CSS Flexbox поддерживается всеми используемые на сегодняшний момент современными браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основы CSS Flexbox

Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline .

После этого данный элемент становится flex-контейнером , а все его непосредственные дочерние элементы – flex-элементами . При этом когда мы говорим о flexbox то подразумеваем под этим только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Таким образом в CSS Flexbox имеется всего два типа элементов: flex-контейнер и flex-элемент.

В CSS для поддержки макета большинством браузеров добавлены свойства с префиксами и max-width .

Для «превращения» блока во flex-контейнер используется класс row . Установку ширины flex-элементам .col__article и .col__aside внутри flex-контейнера выполнено с использованием CSS-свойства flex .

В качестве примера разметим посредством flexbox ещё футер и создадим в элементе .col__article блок состоящий из трёх элементов (минимальная ширина одного элемента — 300px). В футере разместим четыре блока (минимальная ширина одного блока — 200px).