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 Daniel Kong
Daniel Kong
5,813 Points

Why it displayed different from the video shown.

I'm following the step in the video, but it displayed different result. In the video, the flex items won't become 2 rows if the browser get narrower. But my result is the 4 items became 2 rows and part of the items displayed outside the container.

/* ================================= 
  Flexbox
==================================== */

.container {
    display: flex;
    flex-wrap: wrap;
  height: 450px;
}

.item {
  flex: 1;
}

.item-1 {
  align-self: flex-end;
}

.item-2 {
  flex: 2;
}

.item-4 {
  align-self: center;
}
Jay Padzensky
Jay Padzensky
4,731 Points

Hi Daniel,

Linking to the video to which you're comparing your code could be helpful for other students here in the Community. Additionally, using the Markdown Cheatsheet to help format your post can make your code easier to read. I've added the required tick marks that help formatting denote code. You can edit your original post to see how it's done.