Content updated
By the end, you can…
- Put display: flex on the parent. Direction chooses the main axis; the children become flex items.
- Explain the example, change one value, and check the result in your own page.
One idea at a time
Flexbox arranges a group along a main axis, the direction in which items are arranged: a row or a column. The cross axis runs perpendicular to it. It is useful for a small navigation group or actions that should share available space. Only direct children become flex items. A paragraph nested inside one child is still ordinary content inside that item, not another member of the parent's flex layout.
For the left-to-right horizontal writing used here, row runs horizontally and column runs vertically. justify-content distributes spare space on the main axis; align-items aligns items on the cross axis. If you change direction, the axes change too. Memorizing justify as horizontal would give the wrong prediction for a column.
What to remember first
Put display: flex on the parent. Direction chooses the main axis; the children become flex items.
Read the CSS before trying it
display: flex / flex-directionContainer and direction- row is the default direction. column changes the main axis; reverse values change visual order, not the order of elements in the HTML that reading and keyboard navigation follow.
justify-content / align-itemsMain and cross axes- center aligns on the relevant axis. space-between distributes spare main-axis space between items; stretch can stretch auto-sized items across the cross axis.
gap / flex-wrapSpacing and extra lines- gap separates items. wrap allows another flex line when items cannot fit on one line.
flex: 1 1 120pxGrow, shrink, basis- The three values are flex-grow, flex-shrink, and flex-basis. Here 1 allows growth, 1 allows shrinking, and 120px is the starting size along the main axis. In 0 1 auto, 0 disables growth and auto uses the item’s size or content as its starting basis.
align-content / orderLater refinements- align-content distributes flex lines when there is spare cross-axis space. order changes visual placement without fixing keyboard or reading order.
Walk through an example
<div class="layout">
<div class="item">Read</div>
<div class="item">Try</div>
<div class="item">Review</div>
</div>.layout {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.item {
flex: 1 1 120px;
padding: 16px;
background-color: #e0e7ff;
color: #312e81;
}The three item divs are direct children of layout. Each starts from a 120px basis, with room to grow or shrink according to the flex algorithm. The container provides wrapping and a 12px gap, so spacing is not attached to individual outside margins. At a narrow width, items can move to another line instead of forcing the page wider.
See it happen: try a small change
Predict what will change, choose a version, and compare the live result with the CSS. Use the real controls when the example includes them.
Code to notice
.item {
padding: 16px;
background-color: #e0e7ff;
color: #312e81;
}Live result
What changed: Before display: flex, the block children stack in normal flow.
Look a little closer
flex-grow shares free space; it does not guarantee equal final widths when items begin with different bases. flex-shrink distributes negative space relative to item sizes and constraints. A long unbroken word or a minimum size can still cause overflow. Inspect content and minimum sizes before assuming flexbox automatically makes every layout responsive.
Use the extra direction preview to compare axes before attempting the sizing task. The deeper Flexbox track covers axes, alignment, wrapping, and sizing separately. You can continue the CSS sequence now and return to that track when you need more practice. Preserve the natural HTML order so the visible order agrees with reading and keyboard navigation.
See the main axis change with direction
The same three items follow a row or a column. Their backgrounds and padding make the boxes visible. Switch direction, then identify the main axis before reading the result. The HTML order stays the same.
Switch between row and column. Watch the same three items follow the main axis.
Code to notice
.layout {
display: flex;
flex-direction: row;
gap: 12px;
} Live result
What changed: In this horizontal writing mode, row places the items across the page.
Go deeper when you are ready
Try it in your own project
Start with the three supplied items and a wrapping row. Narrow the browser, then add a fourth item. For the column comparison use the preview’s flex: 0 1 auto override too: keeping a 120px basis would request height along the new main axis.
The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.
A common wrong turn
Putting justify-content on a child does not align its siblings in the parent. Start by identifying the container. Avoid reverse directions or order as a shortcut for correcting an illogical HTML sequence.
Your turn: arrange a row or column with Flexbox
Build three flexible topic cards that share a row when space allows and wrap on a narrow screen.
Try this task in your own index.html and styles.css files. Save both files and refresh your browser to see changes. Continue below follows the course order, including its practice checkpoint.
Related practice in the course path
This practice appears in Flexbox, step 5. Follow Continue below to reach it after its prerequisites.
For related guided practice, Build a responsive navbar gives you starter code, a live preview, hints, and checks. The task above is a separate variation to try in your own project.
- Give the parent display: flex, a gap, and wrapping.
- Give each direct child the same grow, shrink, and basis values, then compare row and column.
- Add a fourth card and a longer label. Narrow the window and confirm that everything remains readable in its original order.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.