CSS Layouts 6 min readLesson 2 of 2
CSS Flexbox Layout
Build flexible, responsive 1D layouts with display: flex, justify-content, and align-items.
### CSS Flexbox The Flexible Box Layout Module makes it easier to design flexible responsive layout structure without using float or positioning.
Key Flexbox Properties - `display: flex;` — Defines a flex container. - `justify-content: center | space-between | space-around;` — Aligns items along main axis. - `align-items: center | flex-start | flex-end;` — Aligns items along cross axis. - `flex-direction: row | column;` — Sets layout direction.
css
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
```Interactive Sandbox
CSS Flexbox Interactive Grid
Live W3-EditorEdit code below and see instant live output in the preview box
Source Code InputHTML / CSS / JS
Live Browser Result Live Result
Test Yourself With Exercises
Verify your understanding before moving to the next topic
Which CSS property initiates a flexbox container?
❮ Previous: CSS Introduction & Syntax
Course Completed! 🎉