CSS Examples
A collection of practical CSS examples to help you build modern and responsive layouts.
Basic Flexbox Example
Flexbox is a one-dimensional layout model that allows items in a container to be aligned and distributed space. It is a powerful tool for creating responsive layouts.
The main idea behind flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
Live Example
flexbox.css
.container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #1a1a1a;
padding: 1rem;
border-radius: 0.5rem;
}
.item {
background-color: hsl(var(--primary) / 0.2);
color: hsl(var(--primary));
padding: 1rem 2rem;
border-radius: 0.25rem;
font-weight: bold;
}Item 1
Item 2
Item 3
Key Properties
The main properties for a flex container:
| Property | Description |
|---|---|
| display: flex; | Defines a flex container; enables a flex context for all its direct children. |
| flex-direction | Establishes the main-axis, thus defining the direction flex items are placed in the flex container. |
| justify-content | Defines the alignment along the main axis. |
| align-items | Defines the default behavior for how items are laid out along the cross axis. |