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 - Beyond the Basics Understanding Flexbox and Multi-Column Layout Flexbox: justify-content and flex-wrap

Kyle Werstein
Kyle Werstein
1,956 Points
Posted by Kyle Werstein
Kyle Werstein
1,956 Points

Setting li:first-child margin:auto is changing size of element with media query. Why is this?

I'm fiddling in my workspace trying to work out some of the concepts of the flexbox and I noticed something strange. I set the margin-auto property for li:first-child and all of my nav items stay the same size, like in the video.

However, I added a media query that changes the -webkit-flex-direction to 'column' under 610 pixels and removes the auto margins, but now my first item is 10 pixels larger than the other ones. Is there a way to keep the sizing consistent?

Kyle Werstein
Kyle Werstein
1,956 Points
Kyle Werstein
Kyle Werstein
1,956 Points 
.nav {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-justify-content: space-between;
  -webkit-flex-wrap: wrap;
}

.nav li:first-child {
  margin-right: auto;
}

@media (max-width: 610px) {
  .nav {
    -webkit-flex-direction: column;
  }
  .nav li:first-child {
    margin-right: 0;
}
}

Here's my code, if it helps.

2 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points

hey Kyle,

first off, checkout this link below. This is a really good overview of flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Second, to try and answer your question, margins set to auto absorbs extra space, so this might be a reason why your seeing an increase. I would also look at the chrome dev tools and see what is going on. I never heard of this issue.

if you want the page to be responsive and have everything turn into a column instead of a row you don't have to use a media query. You can use the flex-wrap property, and choose wrap this will at smaller pixel widths wrap the divs into a column. I would read the CSS Tricks article. Its great.

Kyle Werstein
Kyle Werstein
1,956 Points
Kyle Werstein
Kyle Werstein
1,956 Points

Hey Jacob!

Thanks so much for the quick response. That CSS Tricks article is exactly what I was looking for. Chris is the dude.

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

Not a problem, any time.