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
Jonas Matuliauskas
5,023 PointsHow to center a flex container but left-align flex items ?
How to center a flex container but left-align flex items
3 Answers
Darrell Conklin
Python Development Techdegree Student 22,377 PointsIt being a flex container doesn't really matter, you can center it the old fashioned way
margin: 0 auto;
or if the flex container is a flex item of another flex container you can use
justify-content: center;
Jonas Matuliauskas
5,023 PointsBut this isn't what I want. I was used you method before, and in big screen everything is good - http://prntscr.com/d0u4h0 but when it does multi-line a container does left-align - http://prntscr.com/d0u5iv . I need this - http://prntscr.com/d0u657
This is my code - https://jsfiddle.net/7wfmm57p/
Darrell Conklin
Python Development Techdegree Student 22,377 PointsAfter looking at your code I better understand what you were wanting to accomplish. Technically the container was centered but the way flex handles wrapped content isn't the greatest. Unfortunately, to my knowledge, this isn't obtainable with flex without a fixed width. You will have to shrink the container until the spacing on either side of the children are to your liking.
Darrell Conklin
Python Development Techdegree Student 22,377 PointsThis should do what your looking for
.center {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
kind of, if another child wraps to the bottom row you may have some possibly unwanted spacing issues.
Darrell Conklin
Python Development Techdegree Student 22,377 PointsThis will also work but will have issues comparable to space-between
.item {
margin: 5px auto 5px 5px;
}
Darrell Conklin
Python Development Techdegree Student 22,377 Pointsif you use this method don't forget to remove the margin declaration further down the css file
Darrell Conklin
Python Development Techdegree Student 22,377 PointsDarrell Conklin
Python Development Techdegree Student 22,377 PointsOn another note, flex-box is good for fixing certain specific issues that were a headache before it came along but in my opinion isn't the best answer for all responsive layouts. It definitely needs some fine tuning that I'm sure we'll see in the hopefully near future.