In my experience as a website developer, it is not enough that we just use Bootstrap Framework in making responsive websites. There are cases when you have to reorder and change the direction (upwards, rightwards, downwards and leftwards) of the elements or align the elements with respect to their container or each other. Then I found Flexbox, an easier way to handle elements in responsive websites, instead of using floats and absolute position.
The Flexbox layout (officially called CSS Flexible Box Layout Module) is made to provide a more efficient way manipulate a container elements’ alignment, direction, order, and size even if it is unknown/dynamic (hence the name ‘flexible’).
Flex layout gives the container the ability to change its items’ width/height (and order) to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Flexbox Terminology and Some Properties
Flexible Box Layout Module contains a lot of things including its whole set of properties. The parent element/container is called the “flex container” whereas the child elements are called “flex items”.
Reordering items of your page using Flexbox is simple and will just need at least two of the Flexbox Module properties, the flex-direction and order properties.
First, you have to set the display for the flex container, it can be either flex or inline-flex.
flex This value causes an element to generate a block-level flex container box.
inline-flex This value causes an element to generate an inline-level flex container box.
Then, specify how flex items are placed in the flex container using flex-direction property. This property can one of the following value: row | row-reverse | column | column-reverse. This determines the direction that flex items are laid out.
Lastly property that we need is order that will be used for the flex items. The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.
Basic Example
Let’s say we have a website with the following markup, header and main navigation on top, leaf and right sidebar, and content in the middle, and footer at the bottom.
<!DOCTYPE html>
<header>...</header>
<nav>...</nav>
<div id="main">
<aside class=”left”>...</aside>
<article>...</article>
<aside class=”right”>...</aside>
</div>
<footer>...</footer>But in Mobile devices, these elements are laid out in a single column and usually content comes first before the sidebars.
This is when Flexbox comes very useful. For us to achieve the mobile layout, we can use the three properties mentioned above.
#main { display: flex; flex-direction: column; }
#main > article { order: 1; }
#main > aside.left { order: 2; }
#main > aside.right { order: 3; }There you have it! You can checkout the complete list of Properties of Flexbox module here. I assure you that you will find a lot of amazing properties that you will be needing in your responsive websites in the future.
