CSS CSS Flexbox Layout Flexbox Properties Wrapping Items and Distributing Space

Ary de Oliveira
Ary de Oliveira
28,159 Points

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

Ary de Oliveira
Ary de Oliveira
28,159 Points

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

Ary de Oliveira
Ary de Oliveira
28,159 Points

-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; }