Пятница, 02 Ноября 2012 12:23

Свойство box-flex

Written by 
Оцени эту запись
(1 Голос)

Свойство box-flex определяет пропорции заполнения родительского элемента дочерними. Свойство реализовано в Firefox, Chrome, Safari в виде -webkit-box-flex и -moz-box-flex и применимо к элементам -webkit-box и -moz-box:

 

 

 

display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
 
 
Приминает значения 0, 1, 2 и т.д. При значении 0 блок не растягивается. Если у одного дочернего элемента значение равно 1, а у другого 2, то первый размет треть родительского, а второй - две трети.
 
 
<div style="
display: -webkit-box;
display: -moz-box;
">
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
">1</span>
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
">2</span>
</div>
 
 
1 2
 
 
<div style="
display: -webkit-box;
display: -moz-box;
">
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
">1</span>
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 2;
-moz-box-flex: 2;
">2</span>
</div>
 
 
1 2
 
 
 
<div style="
display: -webkit-box;
display: -moz-box;
">
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 0;
-moz-box-flex: 0;
width: 50px;
">1</span>
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
">2</span>
</div>
 
 
1 2
 
 
 
 
Примечания 1.
 
 
На элементы, позиционированные absolute или fixed, свойство box-flex на действует.
 
 
<div style="
display: -webkit-box;
display: -moz-box; 
">
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
background: lightblue;
position: absolute;
">1</span> <span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
background: lightgreen;
">2</span></div>
 
 
 
1 2
 
 
Примечание 2. 
 
 
К плавающим элементам (float) свойство box-flex также не применяется.
 
 
<div style="
display: -webkit-box;
display: -moz-box; 
">
<span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
background: lightblue;
float: left;
">1</span> <span style="
display: -webkit-box;
display: -moz-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
background: lightgreen;
">2</span></div>
 
 
 
 
1 2
 
 
 
Примечание 3.
 
 
Как говорилось ранее, свойство box-flex со значением отличным от нуля растягивает дочерние элементы на весь размер их родителя или сужает, если их сумарный размер превышает размер родителя. Но хочу уточнить принцип этого тастяжения. Если элементу не задана его ширина width, то его размер будет равен количеству содержимого. Тонкости box-flex будут лучше заменты, если у дочерних элементов разное количество контента.
 
 
<div style="width: 300px; display: -webkit-box;">
<div style="display: -webkit-box; -webkit-box-flex: 1;">Text Text</div>
<div style="display: -webkit-box; -webkit-box-flex: 1;">Text Text Text Text</div>
</div>
 
 
Text Text
Text Text Text Text
 
 
При вычислении растяжения, учитывается суммарный размер дочерних элементов и оставшееся свободное пространство родителя. Именно свободное пространство делится между дочерними элементами. То есть, если изначально один их элементов больше, то после применения box-flex он и останется больше. 
 
 
На работу свойства box-flex действуют максимальные и минимальные размеры элемента. 
 
 
<div style="width: 400px; display: -webkit-box;">
<div style="display: -webkit-box; -webkit-box-flex: 1; width: 100;">Text Text</div>
<div style="display: -webkit-box; -webkit-box-flex: 1; width: 140px; max-width: 150px;">Text Text Text Text</div>
</div>
 
 
Text Text
Text Text Text Text
 
 
Хоть у второго элемента больше контента, его размер ограничен сверху свойством max-width.
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов