---

Flexible Box Model - часть спецификации CSS3, которая не получила широкого внимания. Давайте исправим это упущение и
рассмотрим как эта возможность может повлиять на дизайн сайтов.

th
{
font-weight: bold;
background: #efefef;
vertical-align: middle;
text-align: left;
height: 50px;
padding: 0 5px;
white-space: nowrap;
}
#article td
{
font-weight: bold;
font-size: 12px;
vertical-align: middle;
text-align: center;
padding: 0 5px;
background-color: #caf8c7;
color: black;
}

Кроссбраузерность

Все описанные свойства, на текущий момент (февраль, 2010), поддерживаются движками Gecko (с префиксом -moz) и Webkit
(с префиксом -webkit), что соответствует баузерам Firefox и Chrome/Safari.

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

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

В наше время, сайты часто делятся на несколько колонок. Для этого активно используется свойство float. Однако,
при разработки CSS2 не стояло задачи многоколоночной вёрстки. И поэтому верстальщики обычно писали что-нибудь такое:

#left-column {
float: left;
}
#right-column {
float: left;
}

Что мы можем сейчас?

Подход к вёрстке с Flexible Box Model слегка отличается. Трудно описать словами простоту, поэтому сразу перейдём к примерам:

<div class="container">
<div class="blue">
Какой-то контент.
</div>
<div class="blue">
Ещё одна колонка.
</div>
<div class="blue">
Всего 4 колонки!
</div>
<div class="blue">
Шикарно.
</div>
</div>

И следующий CSS:

.container {
width: 1000px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.blue {
background: #357c96;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}

Вы можете также установить вертикальную ориентацию для такого типа позиционирования.

Следующий шаг

Как вы наверное заметили, на самом деле документ выглядит так:

То есть справа остаётся пустое пространство. Именно в этом месте возможности Flexible Box Model особенно полезны.
Если раньше мы мучались с размерами элементов, чтобы заполнить это пространство, то сейчас появилась возможность
вытянуть определённые элементы, которые его заполнят.

.flexible {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}

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

То есть оставшееся пространство распределяется между Flex-элементами. Так как в нашем примере только один элемент
является Flex-элементом, то всё пространство отдаётся ему. Если у вас будет два таких элемента, со значением 1, то
пространство будет распределяться между ними равномерно.

Давайте, к примеру, укажем класс .flexible для первых двух колонок. Получим следующий результат:

Как вы уже поняли, ширины этих колонок соотносятся друг к другу, как 1:1. Таким образом, если например у нас осталось 400
пикселей свободного пространства, то при соотношении 3:1, одному элементу достанется 300 пикселей, а второму - 100.

Направление

Направление - это другой ключевой момент в Flexible Box Model. Давайте слегка изменим наш пример. Допустим мы хотим
изменить порядок добавления элементов в контейнер, вместо 1,2,3,4 будет 4,3,2,1. Для этого нам необходимо использовать
свойство direction:

-moz-box-direction: reverse;
-webkit-box-direction: reverse;

Кроме того, вы можете использовать свойство box-ordinal-group, чтобы изменять порядок колонок. Проще говоря,
элемент с наибольшим значением этого свойства, будет перемещён в конец. Если вы укажете обратное направление, то такой элемент
окажется в начале. Пример использования:

-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;

Выравнивание

Выравнивание элементов происходит очень просто. Для этого существует два свойства: box-align и box-pack.

При горизонтальной ориентации элементов, box-align указывает как они должны быть выровнены по вертикали в котейнере.
Аналогично и при вертикальной ориентации. Свойство box-pack - полная противоположность, указывает горизонтальное
выравнивание при горизонтальной ориентации, и вертикальное - при вертикальной.

Допустимые значения и краткое описание

Краткое описание свойств:


Свойство
Описание


box-flex



box-direction



box-align



box-flex-group



box-lines



box-ordinal-group



box-orient



box-pack

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

Направление расположения элементов в элементе-контейнере

Указывает как элементы выровнены в элементе-контейнере.

Связывает элементы в группы

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

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

Ориентация расположения элементов

Выравнивание элементов вдоль их ориентации

Допустимые значения и значения по умолчанию

Свойство
По умолчанию
Допустимые значения


box-flex




box-direction




box-align




box-flex-group




box-lines




box-ordinal-group




box-orient




box-pack

0.0	Вещественное число
normal	normal | reverse | inherit
stretch	start | end | center | baseline | stretch
1	Целое число
single	single | multiple
1	Целое число
inline-axis	horizontal | vertical | inline-axis | block-axis | inherit
start	start | end | center | justify

Значения inline-axis и block-axis для свойства box-orient - соответствуют горизонтальной и вертикальной ориентации.

Теги: CSS, этого Flexible элементов будет Model