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 Building a Layout with Flexbox Building a Navigation Bar with Flexbox

Posted by Darrell Osborne
Darrell Osborne
23,146 Points

Does 'display: flex;' change block elements to be inline elements?

I noticed in the base.css there is a rule that sets ".name a" and ".main-nav a" display to block. If we delete this line, it seems as if everything works the same except the padding and margin for top and bottom. (Well padding works in a sense that the click space is still the same area, but it seems to overlap the higher and lower sections).

Since "li" are default block, then when we set display to flex for the parent "ul" container, and flex default is "row", is this essentially changing the "li" to inline?

When using "img" in Flexbox it seems to still honor the top and bottom, padding and margin values.... little bit confusing/confused.

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Remember that flex is another display choice, other than "block" or "inline". It is, however, considered to be a "block-level" container.

There's also "inline-flex", which creates an "inline-level" container. But these affect how the flex container interacts with sibling and parent elements. Usually, when you use flex, your focus is on what's going on inside, which is where the special flex behavior is happening.

Changing the flex-direction from row to column is not the same as changing the display mode, even though the flex behavior may seem to resemble inline flow behavior. But it's still it's own unique thing.

BTW, have you heard of the Flexbox Froggy game? It's a cute way to extend and reinforce your flexbox learning.

Darrell Osborne
Darrell Osborne
23,146 Points

Hey Steven, thanks for your answer. I think I figured out where my confusion was - I wasn't considering the anchor tags that were in my li tags as still being "inline". That's where my confusion was.

I have not heard of the Flexbox Froggy game. I'll check it out! Thanks again!