CSS · Modern Layout

Flexbox

The modern way to create flexible one-dimensional layouts

Find videos you like?

Save to resource drawer for future reference!

CSS Flexbox

Flexible Box Layout Module

Flexbox = One-Dimensional Layout

Flexbox is a powerful layout system for arranging items in one direction - either horizontally (row) or vertically (column). Perfect for navigation bars, card layouts, centering content, and responsive designs.

Two Parts: Container & Items

Flex Container:

The parent element with display: flex

Flex Items:

The direct children that get arranged

Getting Started with Flexbox

The magic starts with display: flex

Step 1: Create a Flex Container

.container {
  display: flex; /* That's it! */
}

All direct children automatically become flex items and line up horizontally!

Before & After Flexbox

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="demo">
      <h1>✨ Flexbox Magic</h1>
      <div class="section">
        <div class="label label-before">Without Flexbox</div>
        <div class="no-flex">
          <div class="box">Item 1</div>
          <div class="box">Item 2</div>
          <div class="box">Item 3</div>
        </div>
      </div>
      <div class="section">
        <div class="label label-after">With display: flex ✅</div>
        <div class="with-flex">
          <div class="box">Item 1</div>
          <div class="box">Item 2</div>
          <div class="box">Item 3</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Flex Direction

Control the main axis direction

The flex-direction property controls whether items flow horizontally or vertically.

row

Default

Items flow horizontally (left to right)

flex-direction: row;

column

Items flow vertically (top to bottom)

flex-direction: column;

Alignment Properties

The power of Flexbox - perfect alignment!

justify-content

Aligns items along the main axis (horizontal for row)

flex-start - Start

center - Center

flex-end - End

space-between - Space between

space-around - Space around

align-items

Aligns items along the cross axis (vertical for row)

stretch - Stretch (default)

flex-start - Top

center - Middle

flex-end - Bottom

Perfect Centering!

Want to center something both horizontally and vertically? This is the easiest way:

display: flex;
justify-content: center;
align-items: center;

Alignment Playground

See different alignment combinations

Flexbox Alignment Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>⚡ Flexbox Alignment Examples</h1>
      <div class="grid">
        <div class="demo-box">
          <div class="label">justify: center | align: center</div>
          <div class="flex-container center">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: space-between</div>
          <div class="flex-container space-between">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: space-around</div>
          <div class="flex-container space-around">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: flex-end | align: flex-start</div>
          <div class="flex-container flex-end align-start">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: center | align: flex-end</div>
          <div class="flex-container center align-end">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: space-around | align: flex-end</div>
          <div class="flex-container space-around align-end">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Flex Item Properties

Control individual items

flex-grow

How much an item should grow

flex-grow: 1;

flex-shrink

How much an item should shrink

flex-shrink: 0;

flex

⭐ Shorthand

Shorthand for grow, shrink, basis

flex: 1;

Common Pattern

Use flex: 1 on items to make them all equal width and fill available space!

Remember

display: flex creates a flex container

justify-content aligns on main axis (horizontal)

align-items aligns on cross axis (vertical)

flex: 1 on items for equal widths

gap property adds spacing between items

Previous Topic

Pseudo-elements

::before, ::after, ::first-line, ::first-letter, ::selection, ::marker, ::placeholder.

Next Topic

Advanced Flexbox

Flex algorithms, intrinsic sizing, flex-basis: content, order property, and complex flex patterns.

Ask a Question

Have a question about Flexbox? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Modern Layout

Flexbox

The modern way to create flexible one-dimensional layouts

Find videos you like?

Save to resource drawer for future reference!

CSS Flexbox

Flexible Box Layout Module

Flexbox = One-Dimensional Layout

Two Parts: Container & Items

Flex Container:

The parent element with display: flex

Flex Items:

The direct children that get arranged

Getting Started with Flexbox

The magic starts with display: flex

Step 1: Create a Flex Container

.container {
  display: flex; /* That's it! */
}

All direct children automatically become flex items and line up horizontally!

Before & After Flexbox

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="demo">
      <h1>✨ Flexbox Magic</h1>
      <div class="section">
        <div class="label label-before">Without Flexbox</div>
        <div class="no-flex">
          <div class="box">Item 1</div>
          <div class="box">Item 2</div>
          <div class="box">Item 3</div>
        </div>
      </div>
      <div class="section">
        <div class="label label-after">With display: flex ✅</div>
        <div class="with-flex">
          <div class="box">Item 1</div>
          <div class="box">Item 2</div>
          <div class="box">Item 3</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Flex Direction

Control the main axis direction

The flex-direction property controls whether items flow horizontally or vertically.

row

Default

Items flow horizontally (left to right)

flex-direction: row;

column

Items flow vertically (top to bottom)

flex-direction: column;

Alignment Properties

The power of Flexbox - perfect alignment!

justify-content

Aligns items along the main axis (horizontal for row)

flex-start - Start

center - Center

flex-end - End

space-between - Space between

space-around - Space around

align-items

Aligns items along the cross axis (vertical for row)

stretch - Stretch (default)

flex-start - Top

center - Middle

flex-end - Bottom

Perfect Centering!

Want to center something both horizontally and vertically? This is the easiest way:

display: flex;
justify-content: center;
align-items: center;

Alignment Playground

See different alignment combinations

Flexbox Alignment Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>⚡ Flexbox Alignment Examples</h1>
      <div class="grid">
        <div class="demo-box">
          <div class="label">justify: center | align: center</div>
          <div class="flex-container center">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: space-between</div>
          <div class="flex-container space-between">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: space-around</div>
          <div class="flex-container space-around">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: flex-end | align: flex-start</div>
          <div class="flex-container flex-end align-start">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: center | align: flex-end</div>
          <div class="flex-container center align-end">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
        <div class="demo-box">
          <div class="label">justify: space-around | align: flex-end</div>
          <div class="flex-container space-around align-end">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Flex Item Properties

Control individual items

flex-grow

How much an item should grow

flex-grow: 1;

flex-shrink

How much an item should shrink

flex-shrink: 0;

flex

⭐ Shorthand

Shorthand for grow, shrink, basis

flex: 1;

Common Pattern

Use flex: 1 on items to make them all equal width and fill available space!

Remember

display: flex creates a flex container

justify-content aligns on main axis (horizontal)

align-items aligns on cross axis (vertical)

flex: 1 on items for equal widths

gap property adds spacing between items

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Pseudo-elements

Advanced Flexbox

Building Your Learning Module...

Flexbox

Flexbox = One-Dimensional Layout

Two Parts: Container & Items

Step 1: Create a Flex Container

Before & After Flexbox

Perfect Centering!

Flexbox Alignment Examples

Common Pattern

Remember

Pseudo-elements

Advanced Flexbox

Flexbox

Flexbox = One-Dimensional Layout

Two Parts: Container & Items

Step 1: Create a Flex Container

Before & After Flexbox

Perfect Centering!

Flexbox Alignment Examples

Common Pattern

Remember