CSS CSS Flexbox Layout Flexbox Properties Wrapping Items and Distributing Space

Richard Targett
Richard Targett
4,960 Points

Multi line flex?

I tried :multi-flex

Didnt work. What am I doing wrong?

6 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 85,148 Points

Try using flex: flex-wrap property on your flex container. This will ensure your items go to a new line when it needs to :-)

Richard Targett
Richard Targett
4,960 Points

.row { display: flex; justify-content: center; }

I tried this and this:

flex: flex-wrap

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 85,148 Points

Right, my apologies,

I got this wrong just ever so slightly :)

The property you want to use is flex-wrap: wrap; where Flex-wrap is the property and wrap is the value

So you set your flex container context.

display: flex;

and then set flex-wrap like this

.row { 
    display: flex; 
    justify-content: center;
    flex-wrap: wrap;
}

My apologies, I just got mixed up :)

Richard Targett
Richard Targett
4,960 Points

I always get stuck on these test :__(

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 85,148 Points

Use space-between to distribute the space between your flex items.

justify-content: space-between;