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 Matthew McKenzie
Matthew McKenzie
4,450 Points

Flexbox 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

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

Matthew McKenzie
Matthew McKenzie
4,450 Points

The 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

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

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi 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 using 1-based indexing, as opposed to 0-based typically in programming. So, e.g. to get the second from last child the value would be 2, the value we want is 1. Reference

  • nth-child(odd): The value allows 1 of 2 keywords (odd, even), or functional notation see reference. The value odd transposed to functional notation is 2n+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;
}