CSS Flexbox

Flexbox is a CSS layout module designed to create flexible, responsive layouts without using floats or positioning.

Advantages of Flexbox

• Easy horizontal alignment.
• Easy vertical alignment.
• Responsive layouts.
• Equal spacing between items.
• Simple ordering of elements.

.container{

    display:flex;

}

To create a Flexbox layout, apply display:flex; to the parent element. All child elements automatically become flex items.

.container{

    display:flex;

}

The flex-direction property determines the direction in which flex items are displayed.

.container{

    display:flex;

    flex-direction:row;

}

The justify-content property aligns flex items along the main axis (usually horizontally).

.container{

    display:flex;

    justify-content:center;

}

The align-items property aligns flex items along the cross axis (usually vertically).

.container{

    display:flex;

    align-items:center;

    height:300px;

}

.container{

    display:flex;

    justify-content:center;

    align-items:center;

}

By default, all flex items stay on a single line. The flex-wrap property allows items to move onto multiple lines when there isn't enough space.

.container{

    display:flex;

    flex-wrap:wrap;

}

The gap property creates space between flex items without using margins.

.container{

    display:flex;

    gap:20px;

}

.gallery{

    display:flex;

    gap:15px;

}

Flex items can automatically grow or shrink according to the available space using flex-grow, flex-shrink, and flex-basis.

.item{

    flex-grow:1;

    flex-shrink:1;

    flex-basis:200px;

}

Example 1: Navigation Menu

nav{

    display:flex;

    justify-content:space-between;

}

Example 2: Center a Login Form

.container{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;

}

Example 3: Responsive Cards

.cards{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

Flexbox is one of the most powerful CSS layout techniques. Following best practices helps create clean, responsive, and maintainable layouts.

• Use Flexbox for one-dimensional layouts.
• Apply display:flex; only to the parent container.
• Use gap instead of margins for spacing.
• Use justify-content for horizontal alignment.
• Use align-items for vertical alignment.
• Use flex-wrap:wrap; for responsive designs.
• Avoid unnecessary nesting of flex containers.
• Test layouts on different screen sizes.

❌ Incorrect

.container{

    justify-content:center;

}

✔ Correct

.container{

    display:flex;

    justify-content:center;

}

CSS Flexbox is fully supported by all modern browsers, making it the preferred layout system for responsive websites.

1. What is CSS Flexbox?
2. What is the purpose of display:flex;?
3. What is the difference between justify-content and align-items?
4. What does flex-direction do?
5. What is the default value of flex-direction?
6. Why is flex-wrap used?
7. What is the purpose of the gap property?
8. What is the difference between Flexbox and CSS Grid?
9. What do flex-grow, flex-shrink, and flex-basis do?
10. When should you use Flexbox?

In this lesson, you learned:

• ✔ Introduction to CSS Flexbox.
• ✔ display:flex.
• ✔ flex-direction.
• ✔ justify-content.
• ✔ align-items.
• ✔ flex-wrap.
• ✔ gap.
• ✔ flex-grow, flex-shrink, and flex-basis.
• ✔ Practical Flexbox examples.
• ✔ Best practices and common mistakes.