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

Joseph Hall
Joseph Hall
10,865 Points
Posted by Joseph Hall
Joseph Hall
10,865 Points

Using flexbox to align last child with rest of grid

Hi Guys,

I'm building a collection of items (see screenshot) in flexbox, but the last item "Steve Stricker" is all the way on the right. I'd like it to appear in the second column.

Screenshot: https://www.dropbox.com/s/z7aedmyv7sjl9j0/Screen%20Shot%202017-07-30%20at%203.15.36%20PM.png?dl=0

Here's my code:

.videos{ padding:8px 0px 40px 0px; display:flex; align-items:center; max-width:1200px; flex-direction: row; flex-wrap:wrap; justify-content:space-between; }

inside of the videos div, there's a div for each video.

  • Joseph

1 Answer

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

Hi. in the future Markdown your code.

https://teamtreehouse.com/library/code

This is not "last child" issue. But space-between. Remove this declaration and thats it :) (Default value: flex-start)

justify-content:space-between;

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

flex-start (default): items are packed toward the start line