CSS Flexbox

One-dimensional layouts made easy.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

Flexbox lays items out in a row or a column. Set display: flex on a container; its children become flex items.

Container properties

flex-direction: row (default) or column.
justify-content: alignment on the main axis: flex-start, center, space-between, space-around.
align-items: alignment on the cross axis: stretch, center, flex-start.
flex-wrap: wrap: lets items move to the next line.
gap: space between items.

Item properties

flex: 1 lets an item grow to fill space. order changes its visual order.

Key Takeaways: CSS Flexbox

Mastering CSS Flexbox helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Flexbox Code Example

CSS

<style>
  .nav { display: flex; justify-content: space-between; align-items: center; background: #071A2F; padding: 10px 16px; border-radius: 10px; color: white; }
  .nav ul { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
  .cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
  .card  { flex: 1 1 140px; background: #DBEAFE; padding: 16px; border-radius: 10px; }
  .card.wide { flex-grow: 2; background: #CCFBF1; }
</style>

<div class="nav"><strong>Logo</strong><ul><li>Home</li><li>Blog</li><li>Contact</li></ul></div>
<div class="cards">
  <div class="card">Card 1</div>
  <div class="card wide">Card 2 grows twice as much</div>
  <div class="card">Card 3</div>
</div>

Free sign-in required · Google login available

CSS Flexbox Practice Exercises

Check what you learned in “CSS Flexbox”.

/ 3 solved

Fill in the blank

Turn the container into a flex container with space between items.

.nav {
  display: ;
  justify-content: ;
}

✓ Correct! Not quite. Try again.

Multiple choice

Which property lets flex items wrap onto new lines?

flex-wrap flex-break wrap-items flex-flow-lines

✓ Correct! Not quite. Try again.

Code challenge

Make .row a flex container with a 10px gap between items.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services