In this tutorial, we will learn about Flexbox and its uses in modern web development.

What is Flexbox?

Flexbox is a Modern way of laying out elements in a 1-dimensional row without using floats. 

Flexbox is a set of related CSS properties for building 1-dimensional layouts

The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements

Flexbox makes it easy to automatically align items to one another inside a parent container, both horizontally and vertically

Flexbox solves common problems such as vertical centering and creating equal-height columns

Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner HTML and CSS code

Flexbox properties

flex container Properties  (Parent)

display

This defines a flex container.

.container {
  display: flex;
}

flex-direction

To define which is the main axis

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

Flex-direction accepts the following values:

• row: Items are placed the same as the text direction.
• row-reverse: Items are placed opposite to the text direction.
• column: Items are placed top to bottom.
• column-reverse: Items are placed bottom to top.

Notice that when you set the direction to a reversed row or column, start and end are also reversed.

Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

flex-wrap

To allow items to wrap into a new line if they are too large

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

nowrap (default): all flex items will be on one line.

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

wrap-reverse: flex items will wrap onto multiple lines from bottom to top

justify-content

To align items along main axis (horizontally, by default)

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

justify-content property accepts the following values:

flex-start: Items align to the left side of the container.

flex-end: Items align to the right side of the container.

center: Items align at the center of the container.

space-between: Items display with equal spacing between them.

space-around: Items display with equal spacing around them.

align-items

To align items along cross axis (vertically, by default)

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

align-item property accepts the following values:

• flex-start: Items align to the top of the container.
• flex-end: Items align to the bottom of the container.
• center: Items align at the vertical center of the container.
• baseline: Items display at the baseline of the container.
• stretch: Items are stretched to fit the container.

align-content

Only applies when there are multiple lines (flex-wrap: wrap)

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

This property takes the following values:

• flex-start: Lines are packed at the top of the container.
• flex-end: Lines are packed at the bottom of the container.
• center: Lines are packed at the vertical center of the container.
• space-between: Lines display with equal spacing between them.
• space-around: Lines display with equal spacing around them.
• stretch: Lines are stretched to fit the container.

gap

To create space between items, without using margin

.container {
  gap:10;
}

flex items(Children)

align-self

To overwrite align-items for individual flex items

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 This property accepts the same values as align-items and its value for the specific item. 

flex-grow

To allow an element to grow (0 means no, 1+ means yes)

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

flex-shrink

To allow an element to shrink (0 means no, 1+ means yes)

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

flex-basis

To define an item’s width, instead of the width property

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

flex

Recommended shorthand for flex-grow, -shrink, -basis.

.item {
  flex: 0 1 auto
}

order

Controls order of items. -1 makes item first, 1 makes it last

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