0
Responsive Design · Flexbox Layouts
New technique
Flex container, flex items
A row of tools on the rack, neatly spaced: that's flexbox's job.
Putting things next to each other used to take floats and tricks. Flexbox was made for exactly that: lining items up along one line and sharing out the space between them.
display: flex turns an element into a flex container. Each direct child becomes a flex item. Grandchildren are not affected: if a child holds its own group of buttons, that child needs its own display: flex before properties like gap do anything inside it.
.toolbar {
display: flex;
gap: 0.5rem; /* even space between the items */
}- Flexbox is one-dimensional: it lays items out along one line, a row by default.