Flex Box

the css3 Flexible Box Layout Module, commonly known as flexbox, is a one-dimensional and single directional layout. Flexbox is a one dimensional bacause it can only deal with layout in one dimension at a time- either as a row or a column. However, it still make designing flexible responsive layout structure easier, without using float,clear and positioning.

Using Flexbox

To use flexbox we need a flex container and flex items or contents. the flex container need a display: flex declaration.

.container{
 display: flex ;
background : blue
}
.container div{
width: 100px;
height: 100px;
}

<div class= "container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

CSS3 Flex Direction

After setting the display property to flex of the container, now we need to specify the direction of the main axis. the flex-direction CSS prperty defines the main axis. Valid Value:

row ,row-reverse- the main axis and flex items run along from left to right and from right to left
column,column-reverse: the main axis and flex items run along form top to bottom and from bottom to top.

.container{
display: flex;
flex-direction: row
}

CSS3 FlexBox Justify Content

the justify-content property sets how space is distributed between and around flex items. valid values:

flex-start: default; packs flex items drom the start
flex-end: packs flex item to end
center:packs flex items around the center
space-between:distributes flex items evenly with first item on start and last item at end line
space-around:distributes flex items evenly with equal space around them
space-evenly: distributes flex items and makes spacing between two items equal.

.container{
display: flex;
justify-content: center;
}

CSS3 Flexbox Align items

the align-items property sets how flex items are laid out along the cross axis(runs perpendicular to the main axis). Valid values:

flex-start: align items to the start of cross axis
flex-end: align flex item to end of cross axis
center: packs flex itemst o the center of cross axis
stretch: default; stretches items to fill the container
baseline: align items such as their baselines are aligned

.container{
display: flex;
align-items: center
}

CSS3 Flex Grow

the flex-grow property sets the ability of a flex item to grow if necessary. This take a positive number value.

For instance, if a flex item flex-grow is set to 1 and other is set to 2. the one with value 2 will grow twice as much as other.

<div class="container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 2">2</div>
<div style="flex-grow: 1">3</div>

Properties that control alignment

The properties we will look at in this guide are as follows.

justify-content — controls alignment of all items on the main axis.
align-items — controls alignment of all items on the cross axis.
align-self — controls alignment of an individual flex item on the cross axis.
align-content — described in the spec as for “packing flex lines”; controls - space between flex lines on the cross axis.

you can center a flex item by setting align-items: center and justify-content: center.

Remaining properties of Flexbox will be covered in next blog on Flexbox: Advanced Properties.

Sumit Mehra