What is CSS Flexbox

The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

Flexbox Properties:

1. flex-direction:

It defines the direction of items placed inside the container. By default the flex direction is set into row from left to right

syntax:

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

1. row

By default the flex direction is set into row i.e from ltr.

syntax:

.container{
  flex-direction: row;
}

Code

2. row-reverse

In Row reverse items are displayed from right to left.

syntax:

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

Code

3. column

In column direction things are displayed from vertical line from top to bottom.

syntax:

.container{
  flex-direction: column;
}

Code

4. column-reverse

In column reverse the items move from bottom to top direction.

syntax:

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

Code

2. justify-content:

This property is used to align along the main axis. It helps to distribute the items under rows or columns as per we want. It also control over the alignment of items when they overflow the line.

syntax:

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

1. flex-start

items are packed toward the start of the flex-direction.

syntax:

.container{
  justify-content: flex-start;
}

Code

2. flex-end

items are packed toward the end of the flex-direction.

syntax:

.container{
  justify-content: flex-end;
}

Code

3. center

items are centered along the line

syntax:

.container{
  justify-content: center;
}

Code

4. space-between

items are evenly distributed in the line; first item is on the start line, last item on the end line

syntax:

.container{
  justify-content: space-between;
}

Code

5. space-around

items are evenly distributed in the line with equal space around them.

syntax:

.container{
  justify-content: space-around;
}

Code

6. space-evenly

items are distributed so that the spacing between any two items (and the space to the edges) is equal.

syntax:

.container{
  justify-content: space-evenly;
}

Code

3. align-items:

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container {

syntax:

.container {
  align-items: stretch | flex-start | flex-end | center | baseline ;
}

1. flex-start

items are placed at the start of the cross axis.

syntax:

.container{
  align-items: flex-start;
}

Code

2. flex-end

items are placed at the end of the cross axis

syntax:

.container{
  align-items: flex-end;
}

Code

3. center

items are centered in the cross-axis

syntax:

.container{
  align-items: center;
}

Code

4. baseline

items are aligned such as their baselines align

syntax:

.container{
  align-items: baseline;
}

Code

5. stretch

stretch to fill the container (still respect min-width/max-width)

syntax:

.container{
  align-items: stretch;
}

Code

4. align-content:

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

syntax:

.container {
  align-content: stretch | flex-start | flex-end | center | baseline ;
}

1. flex-start

items packed to the start of the container.

syntax:

.container{
  align-content: flex-start;
}

Code

2. flex-end

items packed to the end of the container.

syntax:

.container{
  align-content: flex-end;
}

Code

3. center

items centered in the container

syntax:

.container{
  align-content: center;
}

Code

4. space-around

items evenly distributed with equal space around each line

syntax:

.container{
  align-content: space-around;
}

Code

5. space-between

items evenly distributed; the first line is at the start of the container while the last one is at the end

syntax:

.container{
  align-content: space-between;
}

Code

6. stretch

lines stretch to take up the remaining space

syntax:

.container{
  align-content: stretch;
}

Code

5. flex-wrap:

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

syntax:

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

1. nowrap

all flex items will be on one line

syntax:

.container{
  flex-wrap: nowrap;
}

Code

2. wrap

flex items will wrap onto multiple lines, from top to bottom.

syntax:

.container{
   flex-wrap: wrap;
}

Code

3. wrap-reverse

flex items will wrap onto multiple lines from bottom to top.

syntax:

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

Code