Web Analytics
☕ Coffee 𝕏 Follow
0%

Flexbox Basics

Beginner ~10 min read

What is Flexbox?

Flexbox (Flexible Box Layout) is a modern CSS layout system designed for creating flexible, responsive layouts. It makes aligning and distributing space among items incredibly easy.

Creating a Flex Container

Apply display: flex to a parent element to make it a flex container. Its direct children become flex items.

HTML
CSS
JS

Flex Direction

flex-direction controls the main axis direction: row (default), column, row-reverse, column-reverse.

HTML
CSS
JS

Justify Content (Main Axis)

justify-content aligns items along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.

HTML
CSS
JS

Align Items (Cross Axis)

align-items aligns items along the cross axis: stretch (default), flex-start, center, flex-end, baseline.

HTML
CSS
JS

Centering with Flexbox

Combine justify-content: center and align-items: center to perfectly center content both horizontally and vertically!

HTML
CSS
JS
Quick Reference:
• justify-content - Aligns along main axis (horizontal in row)
• align-items - Aligns along cross axis (vertical in row)
• gap - Spacing between flex items

Summary

  • display: flex - Creates a flex container
  • flex-direction - row, column, row-reverse, column-reverse
  • justify-content - Align on main axis
  • align-items - Align on cross axis
  • gap - Space between items
  • Perfect centering: justify-content: center; align-items: center;

Quick Quiz

Which property aligns flex items along the main axis?

A
align-items
B
justify-content
C
flex-direction
D
align-content
Previous Float & Clear
Next Flexbox Advanced