Learning CSS - Flexbox for One-Dimensional Layout
This episode covers Flexbox for one-dimensional layout: flex containers and flex items, the main axis through flex-direction, alignment with justify-content and align-items, and space distribution via flex-grow, flex-shrink, and flex-basis.
#Introduction
Episode 5 briefly introduced display: flex. Episode 7 covers it fully. Flexbox is a one-dimensional layout model: it arranges items along a single row or column at a time, with full control over direction, alignment, and space distribution.
Since its introduction, Flexbox solved classic problems like vertically centering an element, which used to require tricky hacks. Nearly every modern framework uses Flexbox as the foundation of UI components.
Why does it matter? Because most real layouts — navbars, card lists, action buttons, tags — are one-dimensional. Mastering Flexbox means solving the majority of daily layout problems with three or four properties.
#Flex Containers and Flex Items
Adding display: flex to an element makes it a flex container, and its direct children automatically become flex items:
.container {
display: flex;
gap: 16px;
}
.item {
background-color: #2563eb;
color: white;
padding: 16px;
}When flex is active, items line up along the main axis without needing float or inline-block. The gap property sets spacing between items — previously you had to use manual margins.
#Main Axis: Flex-Direction
The main axis is determined by flex-direction. The default is row, meaning items are arranged horizontally. Change it to column to arrange them vertically:
.baris {
flex-direction: row;
}
.kolom {
flex-direction: column;
}
.baris-terbalik {
flex-direction: row-reverse;
}Note that row-reverse and column-reverse flip the direction as well as the visual order of items. This property is the main way to switch between horizontal and vertical layouts without changing the HTML.
#Alignment: Justify-Content and Align-Items
Alignment on the main axis uses justify-content; on the cross axis it uses align-items:
.tengah {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.tombol {
justify-content: space-between;
}The combination of justify-content: center and align-items: center is the easiest way to center an element within a box. space-between spreads items with equal spacing, pushing the first and last items to the edges.
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}To center a card in the middle of a page, give the container a min-height and then apply both properties above.
#Space Distribution: Grow, Shrink, and Basis
When space is insufficient or leftover, flex-grow, flex-shrink, and flex-basis determine how it's divided:
.sidebar {
flex: 1 1 200px;
}
.konten {
flex: 3 1 400px;
}
.logo {
flex: 0 0 auto;
}flex: 1 1 200px means: may grow with a weight of 1, may shrink, and an initial basis of 200px. The weight ratio of 1 and 3 makes the sidebar and content share extra space in a 1:3 ratio. flex: 0 0 auto prevents an item from growing or shrinking — perfect for logos and icons.
#Flex-Wrap and Order
flex-wrap: wrap makes items drop to the next line when space runs out. order changes the visual order without changing the HTML:
.daftar {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.item {
flex: 0 0 180px;
order: 2;
}
.item-pertama {
order: 1;
}Items with a smaller order appear first. Use order for light responsive reordering, but don't use it as a tool to change the document's logical hierarchy.
#Exercise: A Responsive Navbar
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar Flexbox</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar">
<div class="logo">DevNull</div>
<ul class="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tentang</a></li>
</ul>
<button class="cta">Masuk</button>
</nav>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background-color: #0f172a; color: white; }
.menu { display: flex; gap: 24px; list-style: none; margin: 0; }
.menu a { color: white; text-decoration: none; }
.cta { flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: 6px; background-color: #2563eb; color: white; }Run npx serve . and try changing the window width. The logo, menu, and button stay aligned thanks to align-items: center, while justify-content: space-between keeps spacing between the three.
#Common Mistakes and Solutions
#Align-Items Not Working
If align-items seems ignored, check that the container's height truly exceeds the items. Without extra space on the cross axis, there's nothing to align.
#Shrink Making Items Too Small
By default, flex items can shrink. If text gets cut off, give flex-shrink: 0 or min-width: 0 to items that should keep their size.
#Justify-Content and Gap Clashing
space-between creates spacing between items, and gap adds more spacing on top. Choose one so the spacing doesn't double unexpectedly.
#Closing
Key takeaways:
display: flexenables one-dimensional layout on a container and its children.flex-directiondetermines the main axis: row or column.justify-contentaligns items on the main axis;align-itemson the cross axis.flex-grow,flex-shrink, andflex-basiscontrol space distribution.flex-wraplets items move to a new line;orderchanges the visual order.- The center and align-items combination centers elements without old tricks. In the next episode, episode 8, we'll cover CSS Grid for two-dimensional layout — building rows and columns at once for more complex page layouts like dashboards and galleries.