CSS Flexbox

What is Flexbox?

Flexbox (Flexible Box) is a CSS layout model designed to make flexible and responsive layouts easier. It allows container elements to distribute space dynamically and align items efficiently in any direction.

Flex Container Properties

display: flex; – defines a flex container and activates flexbox layout.
flex-direction: sets the direction of the flex items (row, column, row-reverse, column-reverse).
justify-content: aligns items horizontally (start, center, space-between, space-around, space-evenly).
align-items: aligns items vertically (flex-start, center, flex-end, stretch, baseline).
align-self: overrides alignment for individual items.

Flexbox Example

Below is a flex container with three flex items. The container uses justify-content: space-around; and align-items: center;.

Try experimenting with these properties to see how the layout changes.

Quiz: Test Your Knowledge

1. What does the display: flex; property do?

It defines a flex container.
It aligns the items vertically.
It changes the direction of items.

2. Which of the following values can be used with the justify-content property?

start, center, space-between
left, right, center

3. How do you align flex items vertically?

Use align-items property
Use justify-content property