Tuesday, February 18, 2014

Flexbox layout

Introduction

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.


Examples


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.




Properties


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


flex-direction
Row or column. It defines the main-axis.


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


flex-wrap
Single-line or multi-line.


flex-wrap: nowrap | wrap | wrap-reverse


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


justify-content
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/



align-items
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/



align-content
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)


flex-basis
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)


Resources: