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

Alex Johnson
Alex Johnson
6,319 Points

I have a question about Flex Box row's and the lining up of items

Hi there! Big thanks in advance to whoever can give me some advice on this!

I have a flexbox layout that I am using to make a responsive page. There are a set of blog posts on an index page - in the real world I wont know how many posts there will be so I have mocked up a layout that uses a certain number of posts (10) as an example.

This is the html:

<div id="box-container">
        <div class="box-item"><p>Hello Test Box 1</p></div>
        <div class="box-item"><p>Hello Test Box 2</p></div>
        <div class="box-item"><p>Hello Test Box 3</p></div>
        <div class="box-item"><p>Hello Test Box 4</p></div>
        <div class="box-item"><p>Hello Test Box 5</p></div>
        <div class="box-item"><p>Hello Test Box 6</p></div>
        <div class="box-item"><p>Hello Test Box 7</p></div>
        <div class="box-item"><p>Hello Test Box 8</p></div>
        <div class="box-item"><p>Hello Test Box 9</p></div>
        <div class="box-item"><p>Hello Test Box 10</p></div>
</div>

And some CSS:

#box-container {

    @include flexbox; /* my sass mixin for flexbox display: flex*/
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    width: 90vw;
    margin: 0 auto;
    padding: 1% 5%;
}

.box-item {
    height: 200px;
    background-color: $header-green;

    flex-basis: 1;
    flex-shrink: 0;
    margin-bottom: 20px;

        @include breakpoint(phabletMax) { /* this breakpoint creates 2 col*/
            width: calc(50% - 20px);
        }

        @include breakpoint(tablet) {/* this breakpoint creates 3 col */
            width: calc(33.33% - 20px);
        }

        @include breakpoint(laptopUp) { /* this breakpoint creates 4 col */
            width: calc(25% - 20px);
        }
    }

Now my question is, the first 2 breakpoints work perfectly, regardless of how many post box-item's there are, BUT when I get the 3rd breakpoint active (which should be 4 columns) it breaks and the last 2 items instead of flowing from Left to right on the last line, end up as 9 on the far left and 10 on the far right.

Nothing I do seems to fix this and I cannot find any information on why this is happening. Any guidance would be so greatly received!!

I've got a screen shot of this but I don't know how to add that into this question!

Massive thanks again!

Best wishes

AL

Steven Parker
Steven Parker
230,230 Points

To replicate the issue, we'd need to see either the code defining the variables and includes, or the compiled CSS.

Alex Johnson
Alex Johnson
6,319 Points

Hi Steven! Thanks very much for your response.

Yes sorry I should have sent the compiled CSS! My bad!

The CSS Compiled is here:

#box-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90vw;
    margin: 0 auto;
    padding: 1% 5%;
}

.box-item {
    height: 200px;
    flex-basis: 1;
    flex-shrink: 0;
    margin-bottom: 20px;

        @media only screen and (min-width: 500px) and (max-width: 767px) { /* this breakpoint creates 2 col*/
            width: calc(50% - 20px);
        }

        @media only screen and (min-width: 768px) and (max-width: 1024px) {/* this breakpoint creates 3 col */
            width: calc(33.33% - 20px);
        }

        @media only screen and (min-width: 1025px) { /* this breakpoint creates 4 col */
            width: calc(25% - 20px);
        }
    }

Does this help?

Big thanks in advance!

AL

1 Answer

Steven Parker
Steven Parker
230,230 Points

There seems to be a problem with the CSS compilation. The media queries should not be inside a rule.

But after fixing the CSS, what you see when there are only two items on the last line is simply the result of the "justify-content: space-between;" setting. If you were using "flex-grow" those items would expand to fill the row, but as their size is constrained the justify setting just places space between them.

Alex Johnson
Alex Johnson
6,319 Points

Thanks so much Steven! Thats brilliant!

Really appreciate your help. Sorry for the sloppy CSS!!