Flexbox in HTML5: An Overview

Introduction

If you are a web developer/designer then you might ask how to center a div vertically/horizontally. Yes, centering a div element probably was a tricky job before HTML5.

Searching the internet for “center a div” might give you many links. The possible ways are to apply "margin: 0 auto" and setting the "top:50%" and "left:50%", but these are not the ultimate solutions. We need to do some more tricky things with them.

But the Flexible Box aka flexbox module in HTML5 provides us flexible ways to arrange/align the elements. It provides efficient ways to layout and distributes the space among elements in a container, even when the size of the items is unknown.

Flexible Box

Flexbox is not a single property but a set of properties on the parent element and their children. Basically the parent is a container and probably a div called a flex container and the children are elements called flex items.

The preceding picture shows the Flexible Box Module. Let us discuss the attributes of the flexible box.

Main axis: The main axis is the default flow direction for the flex items.

Main-start and Main-end: The main-start and main-end are the starting point and ending point for the flex items to flow in the flex container.

Cross axis: The cross axis is perpendicular to the main axis.

Cross-start and Cross-end: The flex items are placed from the start at the cross-start point and end at a cross-end point.

Main size: The flex items width or height in the main dimension is the main size of the flexbox.

Cross size: The flex items width or height in the cross dimension is the cross size of the flexbox.

Properties of Flexible Box

There are many properties available in the Flexible Box module. Let us explain each of them. First, we shall explain the properties that are available in the parent element, in other words, the flex container.

Parent Element Properties

Display: flex | inline-flex

Setting the flex value to display a CSS rule makes an element a block-level Flex Container. And the inline-flex makes the element an inline-level

Flex Container.

The properties applied to a Block Layout, clear, float and vertical-align, are not valid on a flex container.

Flex-direction: row | row-reverse | column | column-reverse

This property assures the direction of the flex item in the flex container.

The row value is the default one that makes the flex items to flow from left to right based on direction property. The row-reverse value makes the flex items to flow right to left.

The flex items flow top to bottom if the value is set to the column. And the column-reverse sets the direction of the flex item to bottom to top.

Flex-wrap: nowrap | wrap | wrap-reverse

Flex-wrap property sets the flex container to be a single-lined or multi-lined container. Here the cross-axis property sets the orientation of the single/multi-lined flexbox.

The nowrap value is the default and makes the container single-lined. If you have set the wrap value then the flex container wraps the flex items as multi-lined based on the main size. The wrap-reverse value wraps the flex items in reverse order.

Flex-flow: ‘flex-direction’ | ‘flex-wrap’

The Flex-flow property accepts two values together. The first one is the value-form flow-direction property and the other one is the value from flex-wrap.

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

If the value is flex-start then the flex items are placed from the main-start point and if it is flex-end then the items are placed from the main-end point. This works on the main-axis.

The center value centers the flex items on the main axis. The space-between value makes the flex-container to have spaces between the flex items, and the space-around value makes the flex-container to have space around the flex items.

Align-items: flex-start | flex-end | center | baseline | stretch

The Align-items property is the same as justify-content but it differs from the axis. The justify-content arranges the items on the main-axis (horizontally) whereas the align-items property arranges the items on the cross-axis (vertically).

The baseline value aligns the items on the baselines of the item and the stretch value makes the items to stretch to occupy the available space in the container.

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

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

Child Element Properties

Let us see the properties that can be applied to the child elements.

Align-self: auto | flex-start | flex-end | center | baseline | stretch

The align-self sets the default alignment or overrides the alignment set by align-content for individual flex items.

Order: <integer>

The order property sets the order of the items in the items flow. 0 is the default order.

Flex-grow: <number>

If you set the flex-grow property value to 1 then all the items in the flex container will be equal in size. If you set any of the items in the flex items to 2 then the item that has flex-grow set to 2 will be twice the size of the other items. The default value is 0.

Flex-shrink: <positive number>

The Flex-shrink provides the ability to shrink the flex item. The default value is 1.

Flex-basis: <length> | auto

Flex-basis sets the default size of an element before the remaining space is distributed among the flex items.

Flex: none | [<flex-grow> <flex-shrink> | <flex-basis>]

The flex property is shorthand for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto. If you have set the value to none then it's calculated as 0 0 auto.

Example:

< code > < iframe width = "100%"
height = "500"
src = "http://jsfiddle.net/Jaganathan/yV9Tw/2/embedded/result,css,html"
allowfullscreen = "allowfullscreen"
frameborder = "0" > < /iframe> </code >

Happy Coding :)