CSS Flexbox

CSS Flexbox is a layout system for arranging items in a row or a column. Set display: flex on a parent and its children become flex items that you can align, space and resize with a few properties.

Container Properties

• flex-direction: row (default), column, row-reverse, column-reverse
• justify-content: alignment along the main axis (flex-start, center, space-between, space-around)
• align-items: alignment along the cross axis (stretch, center, flex-start, flex-end)
• flex-wrap: wrap lets items move to new lines
• gap: space between items

A Flexbox Navbar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
nav { display: flex; justify-content: space-between; align-items: center; background: #1e293b; padding: 12px 20px; font-family: sans-serif; }
.logo { color: white; font-weight: bold; }
ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
a { color: #cbd5e1; text-decoration: none; }
</style>
</head>
<body>
<nav>
  <span class="logo">MySite</span>
  <ul><li><a href="#">Home</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul>
</nav>
</body>
</html>

Centering With Flexbox

The easiest way to center something both ways: make the parent a flex container and use justify-content and align-items set to center.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.stage { display: flex; justify-content: center; align-items: center; height: 200px; background: #f1f5f9; }
.box { padding: 20px; background: #8b5cf6; color: white; font-family: sans-serif; }
</style>
</head>
<body>
<div class="stage"><div class="box">Perfectly centered</div></div>
</body>
</html>

flex-grow and Wrapping Cards

The flex shorthand sets grow, shrink and basis. flex: 1 1 180px means "start at 180px, grow to fill space, shrink if needed". With flex-wrap the cards drop to new rows on narrow screens.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.card { flex: 1 1 180px; padding: 20px; background: #dcfce7; border-radius: 8px; font-family: sans-serif; }
</style>
</head>
<body>
<div class="row">
  <div class="card">Card 1</div><div class="card">Card 2</div>
  <div class="card">Card 3</div><div class="card">Card 4</div>
</div>
</body>
</html>

Frequently asked questions

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (horizontal in a row). align-items aligns them along the cross axis (vertical in a row). In a column they swap.

When should I use Flexbox vs Grid?

Use Flexbox for one-dimensional layouts such as navbars and rows of buttons. Use Grid when you need rows and columns at the same time.

How do I center a div with CSS?

Make the parent display: flex with justify-content: center and align-items: center, or use display: grid with place-items: center.