Flexbox Layout Examples: Navbar, Cards and Sidebar

Time to use everything from this chapter. Each of these is something you will build many times.

1. A navigation bar

index.html

HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  .nav { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #1a5276; color: #fff; }
  .nav a { color: #fff; text-decoration: none; }
  .nav .logo { font-weight: 700; margin-right: auto; }
</style>
<nav class="nav">
  <span class="logo">Juniper</span>
  <a href="#">Shop</a><a href="#">Journal</a><a href="#">Contact</a>
</nav>

margin-right: auto on the logo pushes the links to the right.

2. A row of cards that wraps

index.html

HTML

<style>
  .cards { display: flex; flex-wrap: wrap; gap: 12px; font-family: system-ui, sans-serif; }
  .card { flex: 1 1 140px; border: 1px solid #e6ddd7; border-radius: 8px; padding: 12px; background: #fff; }
</style>
<div class="cards">
  <div class="card"><b>Fiction</b><br>120 titles</div>
  <div class="card"><b>Poetry</b><br>45 titles</div>
  <div class="card"><b>Travel</b><br>63 titles</div>
  <div class="card"><b>Cooking</b><br>38 titles</div>
</div>

3. Sidebar and content

index.html

HTML

<style>
  .layout { display: flex; gap: 16px; font-family: system-ui, sans-serif; }
  .side { flex: 0 0 120px; background: #f4ece6; padding: 10px; }
  .main { flex: 1; background: #fdf2e9; padding: 10px; min-width: 0; }
</style>
<div class="layout">
  <aside class="side">Sidebar</aside>
  <main class="main">The main content takes all the remaining width.</main>
</div>

4. A footer that sticks to the bottom

When a page has little content, the footer floats up under it. Flexbox can push it to the bottom of the window.

style.css

CSS

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }   /* takes all the extra height, pushing the footer down */

Practice

Exercise: a media object

Build a row with an avatar (60px circle) on the left and a name and short text on the right. The avatar must not shrink. The text should fill the rest of the row.

Show a possible solution

index.html

HTML

<style>
  .media { display: flex; gap: 12px; align-items: flex-start; }
  .avatar { flex: none; width: 60px; height: 60px; border-radius: 50%; background: #d94a00; }
  .text { flex: 1; min-width: 0; }
</style>
<div class="media">
  <div class="avatar"></div>
  <div class="text"><strong>Mira</strong><p>Owner of the shop.</p></div>
</div>

When you are comfortable here, continue to CSS Grid for two-dimensional layouts.