Flexbox Tutorial - Master CSS Flexbox

What is Flexbox?

Flexbox (Flexible Box Layout) is a powerful CSS layout method that provides an efficient way to arrange, distribute, and align elements within a container, even when their size is unknown or dynamic.

💡 Pro Tip: Flexbox is perfect for one-dimensional layouts (either row or column). For two-dimensional layouts, consider CSS Grid!

Key Benefits

Easy vertical and horizontal centering
Flexible item sizing and distribution
Responsive layouts without media queries
Simplified alignment and spacing
Order control without changing HTML

Perfectly Centered!

Flexbox Fundamentals

To use flexbox, you need two main components: a flex container (parent) and flex items (children).

                /* Make an element a flex container */
                .container {
                    display: flex;
                }
                /* All direct children become flex items automatically */
                .container > * {
                    /* These are now flex items */
                }
            

The Flex Container

When you set display: flex on an element, it becomes a flex container and its direct children become flex items.

Item 1

Item 2

Item 3

Main Axis vs Cross Axis

Flexbox operates on two axes:

Main Axis: The primary axis along which flex items are laid out
Cross Axis: The axis perpendicular to the main axis

⚠️ Remember: The main axis changes based on flex-direction. In row direction, main axis is horizontal. In column direction, main axis is vertical.

Flex Container Properties

These properties are applied to the flex container (parent element):

flex-direction

Defines the direction of the main axis.

flex-direction: row | row-reverse | column | column-reverse;

flex-direction: row

1

2

3

flex-direction: column

1

2

3

justify-content

Aligns items along the main axis.

                justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
            

justify-content: center

1

2

3

justify-content: space-between

1

2

3

justify-content: space-around

1

2

3

justify-content: space-evenly

1

2

3

align-items

Aligns items along the cross axis.

align-items: stretch | flex-start | flex-end | center | baseline;

align-items: center

1

2

3

align-items: flex-start

1

2

3

flex-wrap

Controls whether flex items wrap to new lines.

flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap: nowrap

Item 1

Item 2

Item 3

Item 4

Item 5

flex-wrap: wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Flex Item Properties

These properties are applied to individual flex items (child elements):

flex-grow

Defines how much a flex item should grow relative to other items.

flex-grow: 0 | 1 | 2 | ...;

flex-grow: 1

flex-grow: 2

flex-grow: 1

flex-shrink

Defines how much a flex item should shrink relative to other items.

flex-shrink: 1 | 0 | 2 | ...;

flex-basis

Defines the initial size of a flex item before free space is distributed.

flex-basis: auto | 200px | 20% | 10rem;

flex-basis: 100px

flex-basis: 200px

flex-basis: 150px

align-self

Allows individual items to override the container's align-items value.

Normal

align-self: center

align-self: flex-end

Interactive Flexbox Playground

Experiment with different flexbox properties and see the results in real-time!

Control Panel

flex-direction:

justify-content:

align-items:

flex-wrap:

Item 1

Item 2

Item 3

Item 4

🎯 Try This: Change the flex-direction to column and see how justify-content and align-items behavior changes!

Real-World Examples

Here are some practical applications of flexbox in web development:

1. Perfect Centering

                .center-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100vh;
                }
            

Perfectly Centered Content

2. Navigation Bar

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

Logo

Home

About

Contact

3. Card Layout

                .card-container {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20px;
                    justify-content: center;
                }
                .card {
                    flex: 1 1 300px;
                }
            

Card 1

Card 2

Card 3

4. Media Object

                .media {
                    display: flex;
                    align-items: flex-start;
                    gap: 20px;
                }
                .media-image {
                    flex-shrink: 0;
                }
                .media-body {
                    flex: 1;
                }
            

Image

Media content goes here. This text will wrap around and take up the remaining space.

Browser Support

Flexbox is widely supported in all modern browsers:

Chrome: 29+
Firefox: 28+
Safari: 9+
Edge: 12+
Internet Explorer: 11 (partial support)

💡 Pro Tip: For the best compatibility, use the standard flexbox properties without vendor prefixes. Autoprefixer can help add necessary prefixes during your build process.

Common Flexbox Patterns

1. Sticky Footer

                body {
                    display: flex;
                    flex-direction: column;
                    min-height: 100vh;
                }
                .content {
                    flex: 1;
                }
                .footer {
                    flex-shrink: 0;
                }
            

2. Equal Height Columns

                .equal-columns {
                    display: flex;
                }
                .column {
                    flex: 1;
                }
            

3. Input with Add-on

                .input-group {
                    display: flex;
                }
                .input-group-addon {
                    flex-shrink: 0;
                }
                .form-control {
                    flex: 1;
                }
            

Flexbox vs Grid

While both Flexbox and CSS Grid are powerful layout tools, they serve different purposes:

Flexbox

One-dimensional layout
Content-based sizing
Great for small-scale layouts
Excels at distributing space

CSS Grid

Two-dimensional layout
Layout-based sizing
Ideal for large-scale layouts
Precise control over placement

💡 Pro Tip: You can combine Flexbox and Grid! Use Grid for the overall page layout and Flexbox for smaller components within grid items.

Flexbox Resources

Here are some excellent resources to deepen your Flexbox knowledge:

Conclusion

Flexbox is an incredibly powerful layout tool that simplifies many common UI patterns. By mastering the properties and concepts covered in this guide, you'll be able to create flexible, responsive layouts with ease.

🎯 Final Challenge: Try recreating a complex website layout using only Flexbox. Experiment with nesting flex containers and combining different properties to achieve your desired design!