How to layout with Flexbox
Create a flex container
Direct children become flex items arranged along the main axis.
.actions {
display: flex;
gap: 0.75rem;
}Choose direction and wrapping
The default direction is a row. Allow wrapping when items should move onto additional lines instead of shrinking too far.
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}Align items
justify-content works on the main axis; align-items works on the cross axis.
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
}Control flexible sizes
The flex shorthand sets growth, shrinkage, and basis.
.main { flex: 1 1 30rem; }
.sidebar { flex: 0 1 18rem; }