CSS Flexbox Tutorial

What is Flexbox?

Flexbox, or the Flexible Box Layout, is a CSS module that makes it easier to design flexible responsive layout structures without using float or positioning.

Basic Concepts

flex container – the parent element with display:flex or display:inline-flex.
flex items – direct children of the flex container.
main axis – horizontal by default, the direction flex items are placed.
cross axis – perpendicular to the main axis.

Simple Example

.container{
  display:flex;
  gap:1rem;
}
.item{
  flex:1;
  background:#3498db;
  color:#fff;
  padding:1rem;
  text-align:center;
}

Item 1

Item 2

Item 3

Alignment

.container{
  display:flex;
  align-items:center;   /* cross axis */
  justify-content:center; /* main axis */
}