Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Robert O'Toole
Robert O'Toole
6,352 Points

i really need help

in this lesson now it seems like we are completely scrapping the <li> <ul> stuff just to make flexbox work. in all tutorials i see flex box being used like this example (with classes and no targetting of li etc.

we learned before that nav bars should be set up with <ul><li> and <nav> tags so perhaps this video should teach you how to use a nav bar with those actual tags incorporated? i know quite well now how to use flexbox with classes and ids...

when i try to write code that uses classes and <li> or <ul> it doesn't seem to target anything correctly. im really starting to get discouraged.. all of these tutorials are way to example specific. perhaps im missing something

Robert O'Toole
Robert O'Toole
6,352 Points

i suppose im asking if anyone can tell me how to properly target items with flexbox... do i target the classes? the navs? too many differing approaches

1 Answer

Steven Parker
Steven Parker
216,121 Points

ID's and classes make good CSS targets because they are (or can be) unique on the page. But tags are more likely to be used elsewhere so it might be necessary to be more specific. A descendant selector might be useful in this case.

For example, to convert the unordered list in a nav section into a flexbox, and then set it's items to share space equally:

nav ul { display: flex; list-style: none; }
nav li { flex: 1; }