How to Create a Responsive Layout With Flexbox
A beginner guide to arranging navigation, buttons or cards in a flexible row/column that can wrap on smaller screens.
By the end: You will understand flex container versus flex item and create a wrapping layout without fixed thirds.
You will understand flex container versus flex item and create a wrapping layout without fixed thirds.
Key terms before you start
These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.
What you need before starting
- A code editor
- A local/staging web page you are allowed to edit
- A modern browser with Developer Tools
Real-world notes from public discussions
These are tied to public discussions, not invented case studies. Open the source to read the full thread and surrounding replies.
The repeated developer rule is practical rather than ideological: Grid is useful for two-dimensional layout, Flexbox for arranging items along one main row/column, and real pages often combine both.
Step-by-step tutorial
Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.
Work on a local or staging copy
Open the project containing the HTML/CSS source. If this is a production site, use a staging copy or backup before structural changes.
A browser page is rendered from source files/CMS output; DevTools edits do not save back to the server.
Expected: DevTools edits are temporary. Copy the tested change into the real source/CMS and save it.
Open the page in a modern browser
Load the page, then press F12 or Ctrl+Shift+I (Windows/Linux) to open Developer Tools.
DevTools lets you inspect the DOM, applied CSS, computed sizes, requests and console errors.
Inspect specificity/order/inheritance in DevTools before adding !important.
Create one flex parent
Place the items in a parent such as <div class="row">.
Flexbox controls the parent’s direct children.
Enable Flexbox
Add display:flex to the parent.
The default main axis is a row.
Allow wrapping
Add flex-wrap:wrap.
Without wrapping, children may shrink too far or overflow.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Add spacing with gap
Add gap:1rem.
Gap works for flex rows/columns and is easier than per-item margins.
Set a flexible basis
On children use flex:1 1 14rem or another content-tested basis.
The values mean grow, shrink and flex-basis.
Choose alignment
Use align-items for the cross axis and justify-content for the main axis only when needed.
Do not use space-between to fake margins for complex wrapping rows without testing.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Switch direction for a component if necessary
Use flex-direction:column for stacked variants or at a content-driven media query.
Direction changes the main axis.
Use Flex overlay
Enable the Flexbox badge/overlay in DevTools if available.
Inspect axis, gaps and item sizes rather than guessing.
Inspect specificity/order/inheritance in DevTools before adding !important.
Test long text
Replace one item title with a long realistic string.
Text length is a more useful stress test than empty demo boxes.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Test the public/staging URL logged out
Open the final URL in a private/incognito window.
CMS/admin sessions can hide caching, permission or styling differences.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Document the changed file/rule
Record the file/template/component and purpose of the change in the project notes or version-control commit.
Future maintainers should not have to reverse-engineer why a rule exists.
Expected: DevTools edits are temporary. Copy the tested change into the real source/CMS and save it.
Test the rendered page, not only the source code.
Concrete examples
Copyable example
.row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.item {
flex: 1 1 14rem;
min-width: 0;
}Troubleshooting
Expected: DevTools edits are temporary. Copy the tested change into the real source/CMS and save it.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Inspect specificity/order/inheritance in DevTools before adding !important.
The change has a traceable reason/location.
How the topic comes up in practice
Short excerpts from public discussions that directly relate to the task. Use the source link for the complete context.
“Every card that would cause an overflow will be pushed into the next row while not wasting any space.”
responsive CSS Grid problem ↗
Continue with these tutorials
Documentation and references
Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.