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 Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 1

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Posted by Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

flex box only working partially when i set the navigation display to inline block

I m making my own website, and currently working on navigation but the flex-box feature is not working. I am trying to open it on Chrome here is the html:

<nav>
                <ul>
                    <li><a href="#about">About</a><li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#education">Education</a></li>
                    <li><a href="#experience">Experience</a></li>   
                    <li><a href="#portfolio">Portfolio</a></li>
                </ul>
            </nav>

and the css relating to nav:

nav{
    background: grey;
    display:-webkit- flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
}

nav ul{
    list-style: none;
}

nav li{
    display: inline-block;
}

the problem is display:flex is partially working because i can use row-reverse value of flex-direction but otherwise nav only shows in row if:

nav li{
    display: inline-block;
}

Otherwise it goes back to column and justify content is also not working. Can anyone help please?

1 Answer

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Maybe this link to CSS-Tricks will help. This particular page is all about flexbox. As an aside, Chrome does not require the -webkit- prefix for flexbox. Also, flex-direction:row is the default and doesn't need to be specified.

In short, an element with display:flex is a flex-parent whose children are flex-items. If you want your list items to have space-between them, then the ul needs to be the flex-parent.

<!DOCTYPE html>
<html>
<head>  
    <style>     
        nav { background: grey; }

        nav ul{
            list-style: none;
            padding-left: 0;
            display: flex;
            justify-content: space-between;
        }

        nav li { display: inline-block; }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#education">Education</a></li>
            <li><a href="#experience">Experience</a></li>   
            <li><a href="#portfolio">Portfolio</a></li>
        </ul>
    </nav>
</body>
</html>