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

Posted by Rebecca Jensen
Rebecca Jensen
11,580 Points

CSS FlexBox - can't pull first item to the left

I'm (re)-following the FlexBox tutorial and trying it out on my own webpage. I've successfully gotten my navigation menu to use flexbox and center. However, I'd like to try pulling the first menu item to the left, while the others stay right.

The video I'm referring to is here: https://teamtreehouse.com/library/css-flexbox-layout/flexbox-properties/distributing-space-inside-a-flex-container

The video's css looks like this:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item-1 {
  margin-right: auto;
}

My CSS looks like this:

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.home {
    margin-right: auto;
}

However, my navigation elements just stay centered.

My HTML:

  <nav class="navigation">
    <ul>
      <li><a href="index.html" id="current" title="Welcome" class="home">Welcome</a></li>
      <li><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
      <li><a href="resume.html" title="Resume">Resume</a></li>
      <li><a href="contact.html" title="Contact">Contact</a></li>
    </ul>
  </nav>

Tutorial's HTML:

    <div class="container">
        <div class="item-1 item">Item 1</div>
        <div class="item-2 item">Item 2</div>
        <div class="item-3 item">Item 3</div>
        <div class="item-4 item">Item 4</div>
        <div class="item-5 item">Item 5</div>
        <div class="item-6 item">Item 6</div>
    </div>

I've tried targeting my first nav item in different ways (nav ul li, a#idname, etc), but it won't change.

Thoughts?

Rebecca Jensen
Rebecca Jensen
11,580 Points

Hmm. I've moved the class to the <li> (and not the <a>), and made the <ul> flex so that the <li> children could be flex items.

HTML:

  <!-- NAVIGATION -->
  <nav class="navigation">
    <ul class="menu">
      <li class="home"><a href="index.html" id="current" title="Welcome">Welcome</a></li>
      <li><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
      <li><a href="resume.html" title="Resume">Resume</a></li>
      <li><a href="contact.html" title="Contact">Contact</a></li>
    </ul>
  </nav>

CSS:

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

ul.menu {
    display: flex;
}

li.home {
    margin-right: auto;
}

The first menu item, 'Welcome', still won't stick to the left side of the page.

These are all the other styles currently applied to Navigation:

/*--- NAVIGATION ---*/

.navigation {
    background-color: #2C302E;
}

.navigation li {
    list-style: none;
    display: inline-block;
    padding: 15px 35px;
    font-size: 1em;
    text-transform: uppercase;
}

.navigation li a {
    font-family: 'Montserrat', sans-serif;
}

.navigation a {
    color: #63B0CD;
}

.navigation a:hover {
    color: #DE3C4B;
    text-decoration: none;
}

.navigation a:active {
    color: #F15946;
}

I've tried turning things on and off in Inspector, and can't find anything conflicting.

4 Answers

David Brener
David Brener
3,794 Points

Rebecca,

CSS Tricks has a great, visual tutorial on Flexbox. You can find it here: (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

Hey, I think its because you've made the ul a flex kid, but that doesn't make the li's inside the ul flex-children. I think thats why its not moving.

I hope this helps

Kevin Korte
Kevin Korte
28,149 Points

That's correct, the only flex-child is the <ul>

David Brener
David Brener
3,794 Points
David Brener
David Brener
3,794 Points

Rebecca,

In your code, you have the class of "home" assigned to the <a> tag instead of the <li>. Try what I coded out below...

The HTML

  <nav class="navigation">
    <ul class="listing">
      <li class="home"><a href="index.html" id="current" title="Welcome">Welcome</a></li>
      <li class="right"><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
      <li class="right"><a href="resume.html" title="Resume">Resume</a></li>
      <li class="right"><a href="contact.html" title="Contact">Contact</a></li>
    </ul>
  </nav>

The CSS

nav {
  padding: 15px;
  width: 100%;
  max-width: 1280px;
  background: #333;
}

.listing {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  list-style-type: none;
}

.listing li a {
  margin: 0 10px;
  text-decoration: none;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  line-height: 1.3em;
  font-size: 1.2em;
}

.home {
 justify-self:flex-start;
  margin-right: auto;
}
Rebecca Jensen
Rebecca Jensen
11,580 Points
Rebecca Jensen
Rebecca Jensen
11,580 Points

AHA! If I turn off 'display: flex' for the nav, then the 'welcome' gets pulled left as I intended.

So, basically I had overlapping flex containers...

NAV - flex container UL - flex item/child of the NAV, and a flex container LI - flex item/child of the UL

So, some follow-up questions then:

  1. When assigning an element as a flex container, do ALL of its children become flex items, or just the immediate child?
  2. Can I not assign the same element as both a flex container and item?
  3. How do you deal with wanting multiple levels of children to be flex items?