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

CSS CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

Posted by Alexander Apostolov
Alexander Apostolov
2,217 Points

Since the default expands the content, align-items: stretch, I don't understand the question.

Do I need to expand vertically/horizontally? Is class column a flex item, or a wrapper for nested items? The question is unclear.

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

.row {
  display: flex;
}

.column {
  align-self: center;
}

3 Answers

Krishna Dheeraj Karlapudi
Krishna Dheeraj Karlapudi
20,790 Points
Krishna Dheeraj Karlapudi
Krishna Dheeraj Karlapudi
20,790 Points

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container

.column {
  flex-grow: 2; 
}
Alexander Apostolov
Alexander Apostolov
2,217 Points
Alexander Apostolov
Alexander Apostolov
2,217 Points

Thanks Krishna, interestingly, the next question then makes it clear how they want to expand it.

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

An easy tip is to know that align-items is always perpendicular to the justify-content in terms of axes. Justify-content works on the main, and align-items on the cross, which by default is vertical unless changed (these 2 can swap if declared as such).

I'm assuming you're talking about question 3?

Seeing that nothing has explicitly been declared to swap the axes around, it is set to a default setting, which means that the cross axis is vertical, which means align-items has to be used. The question is asking to position the items in the center, which means that 'center' (without the apostrophes) is the value required. Also row is the selector you'd insert this property since that's what the question states.

.row {
  display: flex;
  align-items: center;
}

.column{
 flex-grow: 1; 
}

.primary{
 flex-grow: 2; 
}