CssHow-ToBeginner · 3 min read

How to Use Flexbox in CSS: Simple Guide with Examples

Use display: flex; on a container to enable flexbox layout. Then control item alignment and spacing with properties like justify-content and align-items.

📐

Syntax

Flexbox works by setting display: flex; on a container. Inside it, flex items can be arranged with these main properties:

flex-direction: direction of items (row, column)
justify-content: horizontal alignment
align-items: vertical alignment
flex-wrap: wrap items to next line

css

/* Flex container syntax */
.container {
  display: flex; /* enables flexbox */
  flex-direction: row; /* items in a row (default) */
  justify-content: flex-start; /* align items left */
  align-items: stretch; /* stretch items vertically */
  flex-wrap: nowrap; /* no wrapping */
}

💻

Example

This example shows a flex container with three colored boxes arranged in a row, spaced evenly with center alignment vertically.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flexbox Example</title>
<style>
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 150px;
    border: 2px solid #333;
    background-color: #f0f0f0;
  }
  .box {
    width: 80px;
    height: 80px;
    background-color: #4CAF50;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 8px;
  }
  .box:nth-child(2) {
    background-color: #2196F3;
  }
  .box:nth-child(3) {
    background-color: #FF5722;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Output

A horizontal row of three colored boxes (green, blue, orange) spaced evenly inside a light gray container with a border, vertically centered.

⚠️

Common Pitfalls

Common mistakes when using flexbox include:

Not setting display: flex; on the container, so flex properties don't work.
Forgetting that flex-direction changes the main axis (row vs column).
Using justify-content and align-items incorrectly by mixing main and cross axis.
Not allowing wrapping with flex-wrap when items overflow.

css

/* Wrong: missing display flex */
.container {
  justify-content: center; /* has no effect without display:flex */
}

/* Right: add display flex */
.container {
  display: flex;
  justify-content: center;
}

📊

Quick Reference

Property	Description	Common Values
display	Defines flex container	flex, inline-flex
flex-direction	Direction of flex items	row, column, row-reverse, column-reverse
justify-content	Align items horizontally	flex-start, center, space-between, space-around
align-items	Align items vertically	stretch, center, flex-start, flex-end
flex-wrap	Wrap items to next line	nowrap, wrap, wrap-reverse

✅

Key Takeaways

Set display: flex; on a container to start using flexbox.

Use flex-direction to choose row or column layout.

Control horizontal spacing with justify-content and vertical alignment with align-items.

Remember to enable flex-wrap if you want items to wrap on smaller screens.

Without display: flex;, flexbox properties won’t work.