Flexbox Guide for beginer

Flexbox is something to which almost every web-developer beginer struggles. In the begining I used to often struggle in placing 3-4 div containers in a single line . But when I discovered css flex-box my life became easier . Before starting with flexbox I want you to know flex-box is very usefull tool and easy to understand . So lets understand flexbox before any further delay.

Lets have a look at this figure, which explains the main idea behind the flex layout.

Items are always laid out following either the main axis or cross axis

• main axis – It is the primary axis along which flex items are laid out. It is not necessarily horizontal; remember it depends on the flex-direction property .

• cross axis – The axis which is perpendicular to the main axis is called the cross axis.

Flexbox Properties :

Properties of parent (div container):

• Display : flex

  This property is applied to div container to make all the children element flexible.

• Flex-direction :

  row | row-reverse | column | column-reverse . This property is applied to set the direction of items inside the div container.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• Flex-wrap :

  This property helps us to wrap flex-items . Bydefault this property is set to nowrap , which will set all items in line.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• flex-flow:

  This property is a shorthand for flex-direction and flex-wrap

.container {
  flex-flow: column wrap;
}

• justify-content:

  This property aligns flex-items along main axis

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• align-items :

  This property is similar to justify content , the only difference is that it works along the cross (which is perpendicular to main axis)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• align-content :

  This aligns a flex container’s lines when there is some extra space in the cross-axis, similar to how justify-content aligns individual items along the main-axis.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Properties of children :

• order

Order is used to change the default order of flex-items .

.item {
  order: 5; /* default is 0 */
}

• flex-grow

It takes a unitless value and grows the item in that proportion. Example: If one of the children has a value of 2, that child would take up twice as much of the space either one of the others (or it will try, at least). Remember Negative numbers are not allowed

.item {
  flex-grow: 4; /* default 0 */
}

• flex-shrink

It defines the ability of the item to shrink when necessary . It does not take negative number .

.item {
  flex-shrink: 3; /* default 1 */
}

• flex-basis

It takes a default size value of the element before the remaining space is distributed

.item {
  flex-basis:  | auto; /* default auto */
}

• flex

flex is the shorthand property for flex-grow, flex-shrink and flex-basis combined. Its default value is always 0 , 1 , auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

• align-self

align-self is used to set individual items