CSS3: Flexible Box Model - «Верстка»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
4-03-2010, 13:00
CSS3: Flexible Box Model - «Верстка»
Рейтинг:


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Вещественное число
normalnormal | reverse | inherit
stretchstart | end | center | baseline | stretch
1Целое число
singlesingle | multiple
1Целое число
inline-axishorizontal | vertical | inline-axis | block-axis | inherit
startstart | end | center | justify

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


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

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

Просмотров: 1 210
Комментариев: 0:   4-03-2010, 13:00
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle