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
Matthew McKenzie
4,450 PointsFlexbox Layout
I am curious. When you want a two column layout and you use flexbox it works pretty good unless you have an uneven number. How do I the last item on the list to always still follow the dual column format?
See example: https://codepen.io/mkenzie87/pen/WqzYjM
2 Answers
Jamie Reardon
Treehouse Project ReviewerI don't understand your question, if you don't mind elaborating further I could assist you better? Although, looking at your code on the demo, I am not sure what you are trying to achieve. I have edited your code below that gives you a dual column layout. Due to the 60% width for the body rule, it is certain that the flex-items will wrap to a new line because the flex-basis value is set to 400px each. That is 800px (minus margins) per line if you want a dual column layout for example.
* {
box-sizing: border-box; /* I added this property to ensure that your padding-right value would be calculated inside the box model. */
}
body {
width: 80%; /* I increased the width from the base 60% you had previously. That is way too small for these columns to display side by side. */
margin: auto; /* I used the value auto to therefore center the flex-container in the middle of the page to adjust readability and visual appearance. */
}
.customized-solutions-wrapper {
display: flex;
flex-wrap: wrap;
}
.customized-solutions-single {
flex: 1 400px; /* I changed your flex-basis property to the shorthand flex property as this is what you should be using, unless otherwise individually setting one of the properties. */
padding-right: 20px;
}
I hope this helps give you some insight into flexbox.
Sean T. Unwin
28,690 PointsHi Matthew,
The reason this is happening is because of the flex-basis (the first part, i.e. 1) part of flex: 1 400px;. A flex-basis of 1 will set the width to 100% of the flex item's container / parent.
The solution to your problem is to add another CSS class specifically targeting the last row that is odd and setting the flex-basis of flex to 0.
"Targeting the last row that is odd" means that the last row has no partner, i.e. there is no content for the second column. When this is the case we set the flex-basis to 0. A flex-basis of 0 will set the width of the flex item to it's own content, instead of it's parent width as with flex-basis of 1.
Psuedo-Classes we will use to get the last child that is odd:
nth-last-child(1): The values within the brackets are the index starting from the last using1-based indexing, as opposed to0-based typically in programming. So, e.g. to get the second from last child the value would be2, the value we want is1. Referencenth-child(odd): The value allows 1 of 2 keywords (odd, even), or functional notation see reference. The valueoddtransposed to functional notation is2n+1. Reference
Add the following to your CSS below the class, .customized-solutions-single:
.customized-solutions-single:nth-last-child(1):nth-child(odd) {
flex: 0 0 400px;
}
Matthew McKenzie
4,450 PointsMatthew McKenzie
4,450 PointsThe reason why I had the 60% is just to show two columns. But when i shrink the screen and make it two columns the last one goes across both columns. In bootstraps if you wanted a two column layout you would give it a class of col-md-6 and the items would always stay in two columns and not wrap across the other column. See my image: https://cl.ly/a70ef277a186
Jamie Reardon
Treehouse Project ReviewerJamie Reardon
Treehouse Project ReviewerI see what you are saying Matthew, but I don't see how adding the 60% width to the body rule would allow you to display these columns contents in a two-column layout. I think there is a small misunderstanding that you may have with flexbox and bootstrap. Were you previously trying to apply the width to another element than the body rule instead? I know about bootstrap and have experimented a small amount previously in the past. They are class specific and have certain styles obviously applied to those classes, but what you have here in your code doesn't exactly match that with the requirements of the bootstrap class. Applying classes such as col-md-6, col-xs-3 etc won't necessary work on its own. The main problem here is the width used on the body rule.