🎯 Master Flexbox — Learn by Doing

What is Flexbox?

The CSS Flexible Box Layout Module (Flexbox) is a one-dimensional layout model that offers an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.

Why Use Flexbox?

Flexbox makes it simple to solve common layout problems that were historically difficult with CSS. It's perfect for:

Building responsive navigation bars.
Vertically centering content (finally!).
Creating "holy grail" layouts (header, footer, sidebar, main).
Distributing items with equal spacing.
Making items grow or shrink to fill available space.

Interactive Playground

Container (Parent) Properties

flex-direction

justify-content

align-items

flex-wrap

align-content

gap (in px)

Item (Child) Properties

No item selected

Click an item in the visualizer to select it and edit its properties.

order

flex-grow

flex-shrink

flex-basis

align-self

Live CSS Output

                     /* Container Styles */
                     .container 
                     {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: stretch;
                        flex-wrap: nowrap;
                        align-content: stretch;
                        gap: 10px;
                     }

                     /* Selected Item Styles */
                        .selected-item 
                        {
                           order: 0;
                           flex-grow: 0;
                           flex-shrink: 1;
                           flex-basis: auto;
                           align-self: auto;
                        }

Challenges (Try These!)

Use the playground controls to achieve the following layouts. Click "Show Solution" to see the CSS.

Challenge 1: Centered Column

Make all items stack vertically in a column, centered on the page (both horizontally and vertically).

   .container {
   flex-direction: column;
   justify-content: center;
   align-items: center;
   }

Challenge 2: Holy Grail Footer

Arrange 3 items so they are in a row, with the middle item taking up all the extra space.

/* Set container to: */
flex-direction: row;

/* Select Item 2 and set: */
.item-2 {
flex-grow: 1;
}

Challenge 3: Re-order

Make the items appear in the order 3, 1, 2.

   /* Select Item 1: */
   .item-1 { order: 2; }

   /* Select Item 2: */
   .item-2 { order: 3; }

   /* Select Item 3: */
   .item-3 { order: 1; }