Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Flexbox Layout Flexbox Properties Wrapping Items and Distributing Space

Posted by Naomi Nyandoro
Naomi Nyandoro
6,643 Points

first make .row a flex container.

style.css 
/* Complete the challenge by writing CSS below 
.row { display: inline flex;}
index.html 
<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Layout</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

6 Answers

Tom Achki
Tom Achki
3,680 Points
Tom Achki
Tom Achki
3,680 Points

You need to write inline-flex

So you are missing "-" symbol.

display: flex; will also work I believe.

Naomi Nyandoro
Naomi Nyandoro
6,643 Points
Naomi Nyandoro
Naomi Nyandoro
6,643 Points

thank you Tom but it keeps giving me a bammer

Tom Achki
Tom Achki
3,680 Points

You mean it gives you error? I've tried this challenge now and it works

.row{ display: flex; }

Naomi Nyandoro
Naomi Nyandoro
6,643 Points
Naomi Nyandoro
Naomi Nyandoro
6,643 Points

yes its saying Are you giving .row the display value that creates a flexbox layout

Tom Achki
Tom Achki
3,680 Points
Tom Achki
Tom Achki
3,680 Points

hmm, make sure you don't have syntax errors.

.row { display: flex; }

You can copy this, it works for me. Also try to refresh the challenge. Are you sure you are writing code in exercise 1 of 3?

Naomi Nyandoro
Naomi Nyandoro
6,643 Points
Naomi Nyandoro
Naomi Nyandoro
6,643 Points

thanks Tom i refreshed and it worked perfectly fine..i was stuck on this one

Tom Achki
Tom Achki
3,680 Points

You're welcome. Happy to help :)

Heba Hendy
Heba Hendy
7,786 Points
Heba Hendy
Heba Hendy
7,786 Points

.row { display: flex;}