flex-grow

[DivMan]

В теории сказано, если 1 элементу задать flex-grow: 2, то он будет в 2 раза длиннее остальных, но почему он, начинает занимать всю оставшуюся длину?

 

http://jsfiddle.net/u0xgxo2q/

[afdw]

http://jsfiddle.net/u0xgxo2q/1/

[DivMan]

http://jsfiddle.net/u0xgxo2q/1/

Если задать для всех flex-grow: 1; то потом ширина элемента уже не 100px

[lexxcode]

В теории сказано, если 1 элементу задать flex-grow: 2, то он будет в 2 раза длиннее остальных

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

 

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

 

Почитай статейку мою http://habrahabr.ru/post/242545/я там обращал внимание на этот момент и показывал на примерах.

 

Успехов!

[DivMan]

 

В теории сказано, если 1 элементу задать flex-grow: 2, то он будет в 2 раза длиннее остальных

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

 

 

Надо срочно учить английский? 

Edited June 25, 2015 by DivMan

[lexxcode]

Скажем английский никогда не помешает. А в нашем деле без него так вообще никак

[DivMan]

Сделал для себя небольшой справочник, может кому пригодится 

 

flex-grow - фактор увелечения. 

контейнер 500px

базовая ширина 100px (flex-basis)

2 блока, остаток 300px

 

1) flex-grow: 2

2) flex-grow: 1

 

Получается соотношения, то есть

 

2 и 1 сложились и получится 3 части

 

Свободное пространство (300px) делится на 3 части и получается 100px

 

Одна часть равняется 100px

 

К первому блоку, добавится 2 части (200px) и получится 300px

Ко второму добавится 1 часть (100px) и получится 200px

 

300px+200px=500px === при написании свойства flex-grow, блоки занимают 

всю ширину родительского контейнера.

Edited June 27, 2015 by DivMan

[afdw]

2 и 1 сложились и получилось 5 частей

Не понял, почему не 3?

Edited June 27, 2015 by afdw

[DivMan]

 

2 и 1 сложились и получилось 5 частей

Не понял, почему не 3?

 

 

спать хотел

 

Исправил, спасибо

Edited June 27, 2015 by DivMan

[Jack_V]

А как по мне - то все куда проще.
1) Значение flex-grow по умолчанию равно нулю.
2) У кого из элементов значение не по умолчанию - те участвуют в деребане пустого места, а там уже у кого значение
круче (почти как чиновники ).

Даже, кажется, Серега (кто знает поймет) называл этот параметр жадностью.

 

Вот напилил сегодня две программки на пайтоне :
а) первая (flexbox) не очень полезна (принимает ширину контейнера, ширину блоков и flex-grow, а на выход
дает итоговую ширину)
б) а вторая (flexbox_width) поинтересней (принимает ширину контейнера, начальную ширину блоков и
ширину, которой следует добиться с помощью flex-grow, значение которого и подает на выход )

Качаем и читаем read_me. 

Edited June 28, 2015 by Jack_V

[lexxcode]

Я когда разбирался писал примерчик, может и вам поможет лучше понять как это работает http://jsfiddle.net/alexriz/rhdw2v3v/

там у блоков basis:100px;. По растягивайте окно, например, чтобы значение [ContainerWidth:] стало 500px и посмотрите как распределится свободное место между блоками