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

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
.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

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

Hey Jacob!

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

Not a problem, any time.