Skip to content
Home Tutorials Roadmaps Courses
Log in Join free
Tutorials CSS Flexbox
Introduction to CSS
What is CSS? CSS Selectors
Colors & Backgrounds
CSS Colors Backgrounds
Text & Fonts
Text Styling Web Fonts
Box Model
The Box Model Display & Positioning
Layout
Flexbox CSS Grid
Responsive Design
Media Queries Units & Sizing
Animations & Effects
Transitions & Transforms CSS Animations
Advanced CSS
Pseudo-classes & Pseudo-elements CSS Variables & Best Practices
CSS Beginner FREE

Flexbox

Lesson 1 of 16 Beginner Interactive

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It makes it easy to align and distribute space among items.

Container Properties

  • display: flex — enables flexbox on the container
  • flex-direction — row, column, row-reverse, column-reverse
  • justify-content — horizontal alignment: flex-start, center, space-between, space-around
  • align-items — vertical alignment: flex-start, center, stretch
  • flex-wrap — nowrap (default), wrap
  • gap — space between flex items

Item Properties

  • flex-grow — how much the item should grow
  • flex-shrink — how much the item should shrink
  • flex-basis — initial size before growing/shrinking
  • flex — shorthand: flex: 1 = grow equally
  • align-self — override container's align-items for one item

Syntax

CSS 
/* Flex Container */
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Flex Items */
.item {
    flex: 1;          /* grow equally */
    flex: 0 0 200px;  /* fixed width */
    align-self: flex-end;
}
Flexbox Layout
HTML 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        .item {
            flex: 1;
            padding: 20px;
            background: #f0f0f0;
            border-radius: 8px;
            text-align: center;
        }
        .item-fixed {
            flex: 0 0 160px;
            background: #dbeafe;
        }
        .center-all {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 120px;
            border: 1px dashed #999;
            margin-top: 16px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">flex: 1</div>
        <div class="item-fixed">flex: 0 0 160px</div>
        <div class="item">flex: 1</div>
    </div>
    <div class="center-all">justify-content: center + align-items: center</div>
</body>
</html>
Try It Yourself

Practice

1
Exercise

Create a flex container that centers its items both horizontally and vertically.

Answer 
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}
2
Exercise

Build a navigation bar with the logo on the left and links on the right using flexbox.

Answer 
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Quick Quiz

1

Which property aligns items along the cross axis in flexbox?

align-items controls alignment on the cross axis (perpendicular to the main axis).

2

What does flex: 1 do to a flex item?

flex: 1 sets flex-grow to 1, making the item grow to fill available space.

Interview Questions

Flexbox is one-dimensional — ideal for layouts in a single row or column (navigation bars, card rows, centering). Grid is two-dimensional — ideal for page layouts and complex grids where you need to control both rows and columns simultaneously.

justify-content distributes items along the main axis (horizontal in row direction). align-items distributes items along the cross axis (vertical in row direction). The main axis direction is controlled by flex-direction.

Next Lesson
CSS Grid