For years, laying out a web page meant bending tools to jobs they were never designed for. Floats, tables, and fiddly positioning tricks were pressed into service just to get a few boxes sitting side by side neatly. Flexbox arrived to fix exactly that, and it has quietly become one of the most useful layout tools in CSS.
This is the second entry in the CSS companion series. Having covered the box model, which describes how each individual element is built, Flexbox is about how a group of elements sit together, lining up in a row or a column and sharing the available space between them.
The Basic Idea
.container { display: flex;}
Setting display to flex on an element turns it into a flex container, and its direct children become flex items. By default, those items line up in a single row, sit side by side, and stretch to match the tallest item’s height. That one line of CSS replaces a surprising amount of older layout trickery.
Remember: Flexbox works along one direction at a time. It is a one-dimensional layout system, handling either a row or a column, which is exactly why it suits things like navigation bars, card rows and toolbars so well.
The Properties Worth Learning First
flex-direction
.container { display: flex; flex-direction: column;}
Controls the main direction items flow in. The default is row, which lays items out horizontally. Setting it to column stacks them vertically instead. This direction matters because it decides which axis everything else refers to.
justify-content
.container { display: flex; justify-content: space-between;}
Controls how items are spread along the main axis. Common values include flex-start, center, flex-end and space-between, which pushes the first and last items to the edges and spreads the rest evenly between. It is the property behind most evenly spaced navigation menus.
align-items
.container { display: flex; align-items: center;}
Controls how items line up along the cross axis, the direction at right angles to the main one. In a row, that means vertical alignment. Setting it to center is the long-awaited answer to the old question of how to centre something vertically.
gap
.container { display: flex; gap: 1rem;}
Adds consistent space between items without needing margins on each one. It is cleaner, easier to maintain, and avoids the awkward extra margin on the last item that older techniques left behind.
flex-wrap
.container { display: flex; flex-wrap: wrap;}
By default, items stay on one line and shrink to fit. Setting flex-wrap to wrap lets them drop onto a new line when there is not enough room, which is the foundation of many simple responsive card layouts.
Controlling Individual Items
.item { flex: 1;}
You can also give items their own instructions. The flex shorthand controls how an item grows and shrinks relative to its siblings. Giving every item flex: 1 makes them share the available space equally, while giving one item a larger value lets it claim a bigger share. It is how you get a sidebar that stays narrow while the main content fills the rest.
The align-self property lets a single item break from the group’s alignment, and the order property can change the visual order of items. Both are useful, though changing visual order away from the underlying HTML order can cause accessibility problems for keyboard and screen reader users, so use it carefully.
Why Flexbox Genuinely Matters
- It handles alignment and spacing problems that were once painful, such as vertical centring and equal height columns, in just a few lines
- It adapts naturally to different screen sizes, which supports responsive design and the mobile experience Google evaluates
- Cleaner, shorter CSS is easier to maintain and tends to produce lighter stylesheets, which helps page speed
- It is supported by every modern browser, so it is safe to rely on for production sites
- The WordPress block editor uses Flexbox behind the scenes for its Row, Stack and Buttons blocks, so understanding it helps when something needs fine-tuning
Flexbox in Real Projects
A typical example is a row of service cards on a small business site, say a landscaping firm in Oxford wanting three tidy boxes that sit side by side on a desktop and stack neatly on a phone. With Flexbox, that is a container, a gap and a wrap setting, rather than a page of workarounds.
It is also worth knowing where Flexbox stops being the right choice. When you need to control rows and columns at the same time, such as a full page layout or a photo gallery, CSS Grid is usually the better fit, and that is the subject of the next article in this series.
A Quick Flexbox Checklist
☐ Set display: flex on the parent, not on the items you want to arrange
☐ Pick flex-direction first, since it decides which axis the other properties refer to
☐ Use justify-content for the main axis and align-items for the cross axis
☐ Use gap for spacing rather than margins on individual items
☐ Add flex-wrap when items should drop to a new line on small screens
☐ Check the layout on a real phone, not just a resized desktop window
Frequently Asked Questions
What is the difference between Flexbox and CSS Grid?
Flexbox arranges items along one direction at a time, either a row or a column. CSS Grid controls rows and columns together. Many layouts use both, with Grid shaping the overall page and Flexbox arranging the contents inside each section.
Why is justify-content not centring my items vertically?
Because justify-content works along the main axis, which is horizontal by default. Vertical alignment in a row is handled by align-items. If you have switched to a column direction, the two swap roles, which is a common source of confusion.
Do I need to write Flexbox CSS myself in WordPress?
Often not. The block editor’s Row and Stack blocks expose controls for direction, alignment and spacing that apply Flexbox for you. Custom CSS is only necessary for more specific layouts or when working on a theme.
Does Flexbox work in older browsers?
Flexbox is supported by every current major browser, and has been for years. Only very old browsers, which make up a tiny share of visitors, lack proper support, so most sites no longer need fallbacks.
Can Flexbox affect my SEO?
Not directly, but it influences how well your site works on mobile devices, how quickly it renders and how usable it feels, all of which feed into the page experience signals search engines care about.
Want Your Site’s Layout Reviewed?
If you would like a second opinion on a layout that is not behaving on different screen sizes, get in touch for a plain conversation with no obligation and no sales pitch.