Flexbox is a modern CSS layout system that makes it easy to arrange elements in rows and columns.
Before Flexbox, developers used floats and positioning, which were difficult to manage.
With Flexbox, you can align, space, and resize elements easily in any screen size.
Here, the container becomes a flex container using display flex.
All the elements inside it automatically become flex items and align in one row by default.
Flexbox arranges items in a single line by default.
This makes it perfect for building navigation menus, toolbars, and horizontal layouts without extra CSS tricks.
This is a simple navigation bar built using Flexbox.
With just one property, display flex, you can create layouts that used to require complex CSS.
Why Flexbox is important
- Makes layouts easier and faster
- Works well on all screen sizes
- Reduces the need for floats and positioning
- Used in almost every modern website
Flexbox also makes centering content very easy.
With just two properties, you can align items both horizontally and vertically.
Practice task
Create a flex container and:
- Add three boxes inside it
- Try changing the direction using flex-direction
- Try centering them using justify-content and align-items
Next lesson
In the next page, you will learn about flex containers and flex items in detail.