CSS CSS Flexbox Layout Flexbox Properties Wrapping Items and Distributing Space

Ricard Taujenis
Ricard Taujenis
4,383 Points

Finally, let's distribute the available space inside .row. Give .row the flexbox property and value that will place the

not sure what were the properties to set functions on edges

style.css
.row{
 display: flex; flex-wrap: wrap; 
  justify-content: space-between;
}
.item1 {
 order:  left;
}
.item6 {
 order: right; 
}
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>

2 Answers

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

The class for item1 and item6 is unnecessary for this challenge. It only wants you to set the properties for the "row" class. Take a look here:

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
Roy Yap
Roy Yap
17,968 Points

your awesome jennifer

Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Pro Student 16,741 Points

your answer is super correct, but for me the request 3/3, it is a little tricky, but at the same time I don not know how could be a better way to make that question...

part 3 is tricky. don't forget about using " {flex-direction: } " so that the entire row spans the edge of the div (including items 1 & 6)