CSS Flexbox
Flexbox is a powerful CSS layout system used to arrange items in rows or columns. It is perfect for menus, cards, buttons, pricing boxes, course grids and responsive layouts.
display:flex
Turns a parent element into a flex container.
justify-content
Aligns items horizontally along the main axis.
align-items
Aligns items vertically along the cross axis.
flex-wrap
Allows items to move to the next line.
After This Chapter, You Will Understand
This chapter helps you create clean, flexible and responsive layouts.
Flex Container
Use display:flex on a parent element.
Main Axis
Control row or column direction.
Alignment
Use justify-content and align-items.
Responsive Cards
Create wrapping card layouts.
What is CSS Flexbox?
Flexbox is a one-dimensional layout system for arranging items in a row or column.
1 Simple Meaning
Flexbox allows a parent container to control the position, direction, spacing and alignment of its child elements. It is especially useful when items need to adjust according to screen size.
2 Basic Syntax
display: flex;
gap: 20px;
}
The element with display:flex becomes the flex container. Its direct children become flex items.
Important Flexbox Properties
These are the most commonly used Flexbox properties for layouts.
| Property | Use | Common Values |
|---|---|---|
| display | Creates flex container | flex |
| flex-direction | Controls item direction | row, column, row-reverse, column-reverse |
| justify-content | Aligns items on main axis | flex-start, center, space-between, space-around |
| align-items | Aligns items on cross axis | stretch, center, flex-start, flex-end |
| flex-wrap | Allows items to wrap to next line | nowrap, wrap |
| gap | Adds space between flex items | 10px, 20px, 2rem |
3 flex-direction
display: flex;
flex-direction: row;
}
4 gap
display: flex;
gap: 20px;
}
Flexbox in Action
These demos show how Flexbox changes item direction and alignment.
Row Direction
Column Direction
Center Alignment
align-items: center;
Wrap Items
Space Between
Flex End
align-items: flex-end;
Course Card Layout with Flexbox
Flexbox is excellent for responsive cards because items can wrap naturally.
HTML
Structure of webpages.
CSS
Design and styling.
JavaScript
Interactive behaviour.
Project
Build real webpage.
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.course-card {
flex: 1 1 180px;
}
Practice Flexbox Layout
Edit Flexbox properties and click Run Code to see the layout change.
Mistakes Students Should Avoid
Flexbox becomes easy when parent and child roles are clear.
Wrong Habits
- Applying flex properties to wrong element
- Forgetting display:flex on parent
- Using margin everywhere instead of gap
- Not using flex-wrap for card layouts
- Confusing justify-content and align-items
Correct Habits
- Put display:flex on parent container
- Use gap for spacing between items
- Use flex-wrap for responsive cards
- Use justify-content for main axis alignment
- Use align-items for cross axis alignment
Test Your Understanding
Select the correct answers and check your score.
1. Which property turns a container into a flex container?
2. Which property controls row or column direction?
3. Which property adds space between flex items?
4. Which property allows flex items to move to next line?
5. justify-content aligns items on which axis?
Remember These Points
Revise these before moving to Chapter 20.
Flexbox
A one-dimensional CSS layout system for rows or columns.
display:flex
Turns a parent element into a flex container.
flex-direction
Controls row or column direction.
justify-content
Aligns items along the main axis.
align-items
Aligns items along the cross axis.
flex-wrap
Allows items to move to the next line.