CSS CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

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

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

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

Valeshan Naidoo
Valeshan Naidoo
26,995 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; 
}