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
Jonathan Salomon
444 PointsBug 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?
/* Complete the challenge by writing CSS below */
.row {
display: flex;
}
.column {
align-self: stretch;
}
<!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>
Micah Doulos
17,663 PointsI 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.
Jonathan Salomon
444 PointsAh. Got it! My bad.
1 Answer
cossy
17,748 Points/* Complete the challenge by writing CSS below */
.row { display: flex; flex-wrap:wrap; }
.column { display: flex; flex-grow: 1; }
Regena Koeshall
Front End Web Development Techdegree Graduate 21,143 PointsRegena Koeshall
Front End Web Development Techdegree Graduate 21,143 PointsThe 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.