Tuesday, February 18, 2014

Flexbox layout


Vertical alignment on the website was a challenge for every coder. Coders used various hacks or adding no semantic code for it. Times have changed and coders have a pretty good support for Flexbox layout.

With Flexible layout you can align inner elements horizontally and vertically. There are a lot of properties with strange names. For a perfect understanding of layout you need to read the boring documentation. See reference at the end of this post.


Example 1: Center of element
In this example, you can conveniently use property margin:auto on child element. Another option is to use flex properties justify-content:center and align-items:center.

Example 2: Navigation
See property justify-content. Maybe you will be interested and other values:  flex-start | flex-end | center | space-between | space-around. If you have set height of navigation, you can consider property align-items:center for vertical centering.

Example 3: Products
The property flex-wrap determine wrapping at the end of line.


flex container
display: other values | flex | inline-flex;

Row or column. It defines the main-axis.

flex-direction: row | row-reverse | column | column-reverse

Single-line or multi-line.

flex-wrap: nowrap | wrap | wrap-reverse

This is a shorthand for flex-direction and flex-wrap properties.

It defines the alignment along the main axis.

justify-content: flex-start | flex-end | center | space-between | space-around

source: http://www.w3.org/TR/css3-flexbox/

This defines the default behaviour for how flex items are laid out along the cross axis on the current line.

align-items: flex-start | flex-end | center | baseline | stretch
source: http://www.w3.org/TR/css3-flexbox/

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

align-content: flex-start | flex-end | center | space-between | space-around | stretch

source: http://www.w3.org/TR/css3-flexbox/

order (flex item)
Controls the order in which they appear in their container.

order: number

flex-grow (flex item)
It dictates what amount of the available space inside the flex container the item should take up.

flex-grow: (default 0)

flex-shrink (flex item)
This defines the ability for a flex item to shrink if necessary.

flex-shrink: (default 1)

This component, which takes the same values as the width property, sets the flex-basis longhand and specifies the flex basis.

flex-basis: | auto (default auto)