CSS Flexbox
Flexbox is a modern layout model in CSS that allows flexible alignment of elements in a row or column. It makes alignment, sizing, and ordering easier to handle.
What is Flexbox?
Flexbox is activated with display: flex. Inside a flex container, elements are automatically arranged flexibly, with many settings available for alignment and distribution.
| Property | Description |
|---|---|
| display: flex | Creates a flex container in which child elements are arranged flexibly. |
| justify-content | Horizontal alignment, such as left, right, center, or evenly distributed. |
| align-items | Vertical alignment inside the flex container. |
| flex-direction | Defines the direction: row or column. |
Basic Flexbox example
In the following example, three elements are inside a flex container, displayed evenly distributed and centered.
With the combination of justify-content: space-around and align-items: center, the elements are evenly spaced and vertically centered.
Tips for using Flexbox
Flexbox makes layout handling easier, especially in dynamic or responsive design.
- Use Flexbox if you need to quickly arrange rows or columns.
- Flexbox is especially useful for responsive design, where elements must adapt to varying screen sizes.
- You can combine Flexbox with media queries to achieve even more flexible layouts.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
