CSS CSS Flexbox Layout Flexbox Properties Wrapping Items and Distributing Space

CSS Flex Box Layout

Challenge Task 3 of 3 Finally, let's distribute the available space inside .row. Give .row the flexbox property and value that will place the first and last items along its edges, then equally distribute the space between the other items.

/* Complete the challenge by writing CSS below */ .row { display: flex; flex-wrap: wrap; justify-content: space-around; } .item-1 { margin-right: auto; }

.item-6 { margin-left: auto; }

style.css
/* Complete the challenge by writing CSS below */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-1 {
margin-right: auto;
}

.item-6 {
  margin-left: auto;
}
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

-Challenge Task 1 of 3

.row { display: flex; }

-Challenge 2 of 3

.row { display: flex; flex-wrap: wrap; }

-challenge 3 of 3

.row { display: flex; flex-wrap: wrap; justify-content: space-between; }

.row { display: flex; flex-wrap: wrap; justify-content: space-between; }