CSS CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

Jonathan Salomon
Jonathan Salomon
444 Points

Bug in "Growing and Aligning Flex Items" Task

There appears to be a bug in the challenge task, "Growing and Aligning Flex Items". Unless I'm missing something obvious, the challenge is not accepting the answer that they are clearly asking for.

Any ideas?

style.css
/* Complete the challenge by writing CSS below */

.row {
  display: flex;
}
.column {
  align-self: stretch;
}
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="secondary column">
        <h2>How to get here</h2>
        <p>Tiramisu caramels gummies chupa.</p>
      </div>

      <div class="primary column">
        <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for.</p>
        <img src="treats.svg" alt="treats">
      </div>

      <div class="tertiary column">
        <h2>Great food</h2>
        <p>Croissant macaroon pie brownie.</p>
      </div>
    </div>
  </body>
</html>
Regena Koeshall
Regena Koeshall
Front End Web Development Techdegree Graduate 21,143 Points

The first part of the challenge uses .column { flex-grow: 1; } the flex-grow determines how much available space inside the flex container an item takes up.

Micah Doulos
Micah Doulos
17,660 Points

I think you're misreading the challenge. Here is the text:

"Challenge Task 1 of 3

Select the class .column and use the flex item property and value that will expand the columns to fill the space of the row."

The stretch command you used fills the space of the column from top to bottom. That is the default value. The challenge is asking for you to 'stretch' each item in the column horizontally (not vertically) along the main axis.

A different property: value pair is required.

1 Answer

/* Complete the challenge by writing CSS below */

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

.column { display: flex; flex-grow: 1; }