CSS Flexbox in Plain English: A Beginner's Guide

CSS Flexbox is the layout system that finally made centering things easy. Before Flexbox, aligning items both horizontally and vertically required hacky CSS. Now it’s two lines. If you’re building any kind of web layout, Flexbox is essential.

Turning Flexbox On

Apply display: flex to a container and its direct children become flex items:

.container {
  display: flex;
}

By default, flex items line up in a row from left to right. That’s already more than the old float-based layouts could do cleanly.

justify-content — Horizontal Alignment

justify-content controls how items are distributed along the main axis (horizontal by default):

.container {
  display: flex;
  justify-content: flex-start;   /* Default — items at the left */
  justify-content: flex-end;     /* Items at the right */
  justify-content: center;       /* Items centered */
  justify-content: space-between; /* Equal space between items */
  justify-content: space-around;  /* Equal space around items */
}

align-items — Vertical Alignment

align-items controls alignment on the cross axis (vertical by default):

.container {
  display: flex;
  align-items: stretch;   /* Default — items stretch to fill height */
  align-items: center;    /* Vertically centered */
  align-items: flex-start; /* Aligned to the top */
  align-items: flex-end;   /* Aligned to the bottom */
}

To perfectly center something both horizontally and vertically:

.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
}

flex-wrap and flex

/* Allow items to wrap to the next line */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* Control how items grow and shrink */
.item {
  flex: 1;         /* Grow and shrink equally */
  flex: 0 0 200px; /* Fixed 200px, no growing or shrinking */
}

flex: 1 on all children makes them share available space equally — great for equal-width columns.

A Practical Navbar Layout

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}
/* Logo on left, nav links on right — two lines of CSS */

Conclusion

CSS Flexbox handles the majority of one-dimensional layout problems cleanly. Master justify-content, align-items, and flex shorthand and you can build navbars, card grids, centered heroes, and more without fighting CSS. Practice by rebuilding a simple navbar and a card row using only Flexbox.

Read next: CSS Grid vs Flexbox: When to Use Which

External resource: MDN — CSS Flexible Box Layout