CSS Flexbox

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model used to arrange HTML elements in rows or columns. It makes it easy to align, distribute, and resize elements inside a container without using floats or complex positioning. Flexbox is one of the most popular CSS layout techniques for building responsive websites.

Why Use CSS Flexbox?

Flexbox simplifies webpage layouts by automatically adjusting the size and position of elements. It helps create responsive designs, align content vertically and horizontally, control spacing between items, and rearrange elements without changing the HTML structure.

Basic Flexbox Syntax

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:flex;
}

</style>
</head>

<body>

<div class="container">

    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>

</div>

</body>
</html>

Step 1: Create a Flex Container

To use Flexbox, first create a container and set its display property to flex. All direct child elements automatically become flex items.

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:flex;
}

.item{
    background:tomato;
    color:white;
    padding:20px;
    margin:5px;
}

</style>
</head>

<body>

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

</body>
</html>

Step 2: Align Flex Items

Use justify-content to align items horizontally and align-items to align them vertically inside the flex container.

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    height:180px;
    background:#eef7ff;
}

.item{
    background:#28a745;
    color:white;
    padding:20px;
}

</style>
</head>

<body>

<div class="container">
    <div class="item">Box 1</div>
    <div class="item">Box 2</div>
    <div class="item">Box 3</div>
</div>

</body>
</html>

Common Flexbox Properties

Flexbox provides several useful properties to control the layout of flex items. The following example demonstrates some of the most commonly used Flexbox properties.

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    background:#f5f5f5;
    padding:15px;
}

.item{
    flex:1;
    background:#007BFF;
    color:white;
    text-align:center;
    padding:20px;
}

</style>
</head>

<body>

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

</body>
</html>

Complete Flexbox Example

<!DOCTYPE html>
<html>
<head>
<style>

body{
    font-family:Arial,sans-serif;
    background:#f5f9ff;
    margin:20px;
}

.container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.card{
    width:180px;
    padding:20px;
    background:white;
    border:1px solid #ddd;
    border-radius:8px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.card h3{
    color:#0056b3;
}

button{
    background:#007BFF;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    background:#0056b3;
}

</style>
</head>

<body>

<div class="container">

    <div class="card">
        <h3>HTML</h3>
        <p>Learn HTML Basics</p>
        <button>Learn</button>
    </div>

    <div class="card">
        <h3>CSS</h3>
        <p>Style Your Website</p>
        <button>Learn</button>
    </div>

    <div class="card">
        <h3>JavaScript</h3>
        <p>Make Websites Interactive</p>
        <button>Learn</button>
    </div>

</div>

</body>
</html>

Advantages of CSS Flexbox

Easy Layout

Simple Design

Creates layouts with minimal CSS.

Flexible Alignment

Perfect Positioning

Aligns items horizontally and vertically with ease.

Responsive Layout

Mobile Friendly

Adapts automatically to different screen sizes.

Equal Spacing

Balanced Layout

Distributes space evenly between elements.

Cleaner Code

Easy Maintenance

Reduces the need for floats and positioning.

Common Mistakes

Beginners often forget to set display:flex on the container, confuse justify-content with align-items, forget to enable flex-wrap, or apply Flexbox properties to child elements instead of the flex container.

<!DOCTYPE html>
<html>
<head>
<style>

/* Incorrect */

.container{
    justify-content:center;
}

/* Correct */

.container{
    display:flex;
    justify-content:center;
}

</style>
</head>

<body>

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

</body>
</html>

Best Practices

Always apply display:flex to the parent container.
Use gap instead of margins to create spacing between flex items.
Use justify-content for horizontal alignment.
Use align-items for vertical alignment.
Enable flex-wrap for responsive layouts.
Keep Flexbox layouts simple and easy to maintain.
Use Flexbox for one-dimensional layouts (rows or columns).
Test your layout on different screen sizes.

Web Resources on CSS Flexbox

1. Web.dev : Flexbox
2. MDN Web Docs : Flexbox
3. CSS Tricks.com : A Complete CSS Flexbox Layout Guide
4. CSS Reference.io : Flexbox in CSS

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.