CSS Flexbox

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout mode designed to provide a more efficient way to arrange, align, and distribute space among items in a container, even when their size is unknown or dynamic.

Basic Concepts

.container{
  display:flex;          /* establishes flex context */
  flex-direction:row;   /* main axis direction */
  justify-content:center; /* align items on main axis */
  align-items:center;   /* align items on cross axis */
}

Live Demo

Common Properties

• flex-direction: row | row-reverse | column | column-reverse
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
• align-items: stretch | flex-start | flex-end | center | baseline
• flex-wrap: nowrap | wrap | wrap-reverse
• gap: spacing between items

Further Reading

Explore other layout techniques:

• CSS Grid Layout
• Responsive Design
• CSS Animations