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 Responsive Layouts Responsive Patterns Flexbox

Susie Kim
Susie Kim
6,143 Points
Posted by Susie Kim
Susie Kim
6,143 Points

What makes the nav element align right?

At the 1030px breakpoint when the flex property goes to none, the nav li items align right. Why does this happen?

3 Answers

Susie Kim
Susie Kim
6,143 Points
Susie Kim
Susie Kim
6,143 Points

I figured it out after continuing forward with the Flexbox course. It's:

.header { justify-content: space-between; }

When the screen gets bigger than 1030px and .nav's flex(-grow) property goes to none, it stops taking up the whole line, then the parent container, .header makes its children, .nav and .logo, arrange apart from each other.

Susie Kim
Susie Kim
6,143 Points
Susie Kim
Susie Kim
6,143 Points

I didn't show "my" code because I was referring to the workspace associated with the video on which I posted the question. But here it is:

/******************************
Flexbox Layout
*******************************/

.header, .nav {
  display: flex;
  flex-direction: column;
}

.header {
  justify-content: space-between;
}

.nav {
  flex: 1;
  justify-content: space-around;
}

@media all and (min-width: 640px) {
  .header, .nav {
    flex-direction: row;
  }
}

@media all and (min-width: 1030px) {
  .nav {
    flex: none;
  }
}


/******************************
Additional Styling
*******************************/

body {
  margin: 0;
  font-family: Helvetica;
  background: #5fcf80;
}

.header {
  padding: 20px 0;
  margin: 0 auto;
}

.logo {
  background: transparent url('../img/treehouse-white.svg') center center no-repeat;
  width: 195px;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.nav {
  list-style: none;
}

.nav li {
  margin: 12px 0 12px 28px;
}

.nav li a {
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}

.nav li a:hover {
  color: rgba(255,255,255,0.7);
}

.nav li:last-child a {
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  transition: 200ms ease-in-out;
  padding: 8px 16px 7px;
}

.nav li:last-child a:hover {
  background: rgba(255,255,255,0.5);
  color: #fff;
}

@media all and (min-width: 1030px) {
  .header {
    width: 1030px;
    min-width: 768px;
  }
Patrick Hartley
Patrick Hartley
12,725 Points
Patrick Hartley
Patrick Hartley
12,725 Points

You'll need to link or show your code so we can see what's going on behind the scenes.