Introducing The CSS Flexible Box (Flexbox) Layout Module

{tocify} $title={Table of Contents}

There had never heard flexbox ? Yep , flexbox CSS3 is a powerful module to set the layout . For you who have never heard it , do not panic , this is your chance to catch up what is flexbox is .

Flexible Layout ( Flexbox ) is a CSS3 module ( not properties , because it consists of a series of properties ) which aims to provide a better layout setting , aligning and spacing between items in a flexible container . We can adjust the position of the item ( can be anything ; div , span , section , ul , li , a, etc ) even without knowing the magnitude of the dimensions of the item ( it is called flex , because it is flexible ).

Does usability flexbox module ?

The main idea behind the establishment of flexbox which gives the container the ability to adjust the length , width , and order items that are in it with the intention of maximizing the existing space . It is important to know because the developer needs now covers many dimensions in a wide range of devices and resolutions .

Ok , now you already know and have no reason why you wear flexbox in coding . Get into the core . Here we go .

Flexbox Concept

Flexbox applied to a container which is then called a Flex Container. Inside the container there is a number of items which may be more than one. This item is called Flex Items. It should be noted, plays flexbox parent and child relationships. Elements into a definite flex item directly from a child element of the container flex.

Flexbox has its own coordinate system, ie
Main Axis: horizontal line extending from left to right (by default)
Cross Axis: vertical lines that stretched sari top to bottom (by default)
Flexbox items stand in a line called the Flex Line. Flex line can be horizontal or vertical depending on the determination of the properties of flex direction. Basically, the items will be made ​​along the line from the main line of flex-start to finish or play from start to cross-cross-finish.

Flexbox Properties

At the beginning already told that flexbox a series of properties, not just one. To set the various properties available flex items. These are some.

Display: flex | flex-inline | flexbox (parent element)

These properties are the most important prop. It is aimed at the container element. The goal menetapkam that element which is intended flex container. Without declare this, all other prop flexbox mean nothing.

display : flex | inline-flex | other values

Note:
- Float, clear, vertical-align samsek no effect on the flex item.
- Css column, as usual, does not apply in the flex container

display : flex | inline-flex | other values

Flex direction (parent element)

Determine the direction of the coordinate flex container if he propagates horizontally (row) or vertically (column). For more details can be seen here. Existing value includes the row, column, row-reverse, and column-reverse

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

Flex wrap (parent element)

Specifies the number of line in flex container, whether single line or multi-line. Besides determining the direction and position of the cross axis to regulate where new items that will be placed. Existing value includes wrap, nowrap, wrap-reverse.

flex-wrap: nowrap | wrap | wrap-reverse

Flex flow (parent element)

It is a short form (shorthand) of 2 properties above (direction & wrap). Shorthand made ​​developers very common because of the effectiveness and simplicity of DOM.
Code :

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

Justify content (parent element)

Determining the settings of flex items along the main axis. This prop items position and utilize the empty space. Existing values ​​include flex-start, center, flex-end, space-between, and space-around.

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

Align items (parent element)

To determine the position of the flex items along the lines cross axis. Prop is similar function to justify the content simply just a different direction, ie perpendicular axis maun. Existing values ​​include flex-start, center, flex-end, space-between, and space-around.

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

Align content (parent element)

Adjust the position of the flex line. These properties will only run if the container has multiple line items. The position can be set if the flex line docked at the beginning, at the end, in the middle or the other. Existing values ​​include flex-start, center, flex-end, space-between, space-around, and stretch.

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

Tutorial

To understand further, let's get dirty on our direct code. You can go to the tutorial section flexbox, here.
If we conclude, there are pros and cons using flexbox.
Pro
- We need not bother to memgatur padding and margins to give the position of an item relative terehadap containernya. Flexbox already handles everything exactly as you volition
- Flexbox is fluid. Very good for responsive design.
Cons
- Flexbox modules are still in the stage of W3C validation, so as to apply it to the web browser vendors still need to use the prefix.

Yap, up here you already know the basic of flexbox. Do not worry, there will be tons of flex layout that will decorate your screen for flexbox still in consurtium W3C and will be unveiled in early 2014, so it's important to know what will be the technology in the future.