CSS CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

Richard Targett
Richard Targett
4,958 Points

Flex question

/* Complete the challenge by writing CSS below */ Finally, align the columns to the vertical center of .row. Use the flex container property that controls alignment on the cross axis.

.row { display: flex; }

.column{ flex-grow: 1; }

.primary { flex-grow: 2; }


I tried many things but simply need an answer since Im out of them :\

You have the first step in the process right, which is to set the display property to flex:

.row {
display: flex; }

The second step is to set the correct alignment property for the cross axis to center. When aligning items to the top or bottom of a container, you would use the "align-self" property with a value of "flex-start" or "flex-end". But, when centering content, you use the property "align-items" with a value of "center". So, the final code for this challenge is:

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

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 82,529 Points

The challenge says align-items to vertical center, which means you need the align-items property.

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

This will align items across the cross axis.

My first thought was to use the flex-direction: column property so I was a little confused at first because this changes the direction of flex items from main axis to cross axis.

Remember the main axis runs left to right of the flex container and cross axis goes from top to bottom.

Cross axis is top and bottom and you can switch the layout from horizontal to vertical. With that said, flex-direction: column and flex-direction: column-reverse should work right?