Flexbox

Август 5, 2012 ||  css , layout ||  комментарии

Flexible Box Layout Module – новая модель компоновки блоков в CSS3.

Все примеры работают в Chrome > 21.

HTML для всех примеров такой:

<section>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</section>

display

Все кино начинается с создания нового контекста форматирования, которое создается вместе с флекс-контейнером.

Короче говоря, свойство display: flex делает элемент флекс-контейнером.

.box{
    display: flex | inline-flex
}

Флекс-боксами будут все элементы которые являются прямыми потомками флекс-контейнера, включая инлайновые элементы. Исключением является только абсолютно позиционированные элементы.

Поскольку flexbox это новая модель построения блоков, некоторые css свойства, которые предполагают поведение блоков по блочной (старой) модели, не будут работать. А именно:

  • column-*
  • float и clear
  • vertical-align

flex-direction

Флексбоксовая модель оперирует с двумя осями – главная ось (main axis) и перпендикулярная ей (cross axis). Главная ось указывает направление выстраивания блоков. Выравнивание боксов может происходить по обоим осям. Но это будет видно позже.

.box{
    flex-direction: row | row-reverse | column | column-reverse
}

row – строчное, горизонтальное “выкладывание” боксов, column – вертикальное.

flex-direction

flex-wrap

.box{
    flex-wrap: nowrap | wrap | wrap-reverse
}

Свойство определяет будет ли флекс-контейнер многострочным или нет.

flex-wrap

flex-flow

Сокращенная запись для двух свойств: flex-direction и flex-wrap

.box{
    flex-flow: <'flex-direction'> || <'flex-wrap'>
}

order

Порядок выстраивания флекс-боксов

order

flex

Свойство flex определяет размер флекс-бокса, ширину или высоту, в зависимости от направления главной оси.

.class{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex-basis – начальное значение размера флекс-бокса, которое может изменится в зависимости от значений flex-grow или flex-shrink.

flex-grow – определяет “коэффициент” увеличения размера при наличии свободного места. Или другими словами это “сила пружины” )

Пример действия flex-grow:

flex-grow

flex-shrink – определяет насколько элемент будет сжиматься при недостатке места. Скажем если сумма начальных значений flex-basis превышает размер контейнера то flex-shrink позволит флекс-боксу сжаться.

flex-shrink

В данном примере при начальном значении ширины элемента 190px флекс-боксы сжались до 118px.

Типовыми значениями flex могут быть:

flex: initial – эквивалентно flex: 0 1 auto.В данном случае флекс-бокс не будет увеличиваться, может сжаться, начальное значение будет определяться по размеру содержимого. При этом бокс будет иметь размеры указанные через width/height.

flex: auto – эквивалентно flex: 1 1 auto. Другими словами флекс-боксы ведут себя по “флексбоксовски”, растягиваясь или сжимаясь, занимая все доступное пространство.

flex: noneflex: 0 0 auto. Это практически аналогично initial, за исключением того что боксы не могут сжиматься.

Свойство flex вроде бы понятное, но следует помнить что оно определяет размер элемента в направлении главной оси. То есть для flex-direction: row это ширина, для flex-direction: column это высота.

В моем примере обратите внимание на бокс 32 и 31. Люопытная штука – получается что флексбокс изначально рендерится принимая во внимание значение flex-basis, потом применяются значения grow и shrink, но размер контента в боксе не учитывается.

justify-content

Это свойство определяет выравнивание флекс-боксов относительно главной оси.

.box{
    justify-content: flex-start | flex-end | center | space-between | space-around
}

Все значения говорят сами за себя. space-between – аналог justify. Применяется к флекс-контейнеру.

justify-content

align-items

.box{
    align-items: flex-start | flex-end | center | baseline | stretch
}

Выравнивание флекс-боксов относительно второй оси, перпендикулярной главной. Применяется к флекс-контейнеру.

align-items

align-self

.box{
    align-self: auto | flex-start | flex-end | center | baseline | stretch
}

Выравнивание относительно cross axis, но разница в том что применяется к флекс-боксу, на случай если надо перекрыть общее значение.

Вот тут начинается когнитивный диссонанс:

align-self

align-self

Этого не может быть!

align-content

Это свойство применяется для многострочных флекс-контейнеров, и выравнивает “строки” флекс-боксов когда есть свободное место. Не знаю, можно ли это понять в таком виде.

The ‘align-content’ property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how ‘justify-content’ aligns individual items within the main-axis.

align-content

пример

Где работает:

По теме:

comments powered by Disqus