Instructions
Use the controls below to experiment with different Flexbox properties. See how they affect the layout of the flex items in real-time!
This interactive exercise will help you understand the following Flexbox concepts:
- Flex direction - How items are arranged in the container
- Justify content - How items are aligned along the main axis
- Align items - How items are aligned along the cross axis
- Flex wrap - Whether items wrap to new lines
- Gap - Space between flex items
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 0px;
}
Flexbox Challenge
Try to achieve these layouts using the controls above:
- Center all items both horizontally and vertically
- Create a vertical column with items aligned to the right
- Make items wrap with even spacing between them
Challenge 1 Complete! Perfect centering achieved! This is commonly used for centering content on a page.
Challenge 2 Complete! Great job creating a vertical column aligned to the right!
Challenge 3 Complete! Excellent work with flex wrapping and spacing!