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 CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Posted by Christian Pineault
Christian Pineault
7,291 Points

flex-basis is 50% of what?

When I followed the exemple here everything works but when I trie to do a little test on my own it did not work. Some how when at media 769px I set flex-grow at 1 and flex-basis at 50% they all appear on separate line instead of two columns and the third one wrapping.

here is my code

the html:

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
    <div class="container">
        <div class="item-1 item">
            <h1>Item 1</h1>
            <p>Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.</p>
        </div>
        <div class="item-2 item">
            <h1>Item 2</h1>
            <p>Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.</p>
            <p>Bicycle rights mumblecore irony disrupt.</p>
        </div>
        <div class="item-3 item">
            <h1>Item 3</h1>
            <p>Banksy squid distillery Portland whatever, lo-fi Wes Anderson.</p>
        </div>
    </div>
</body>
</html>

the base css:

* {
    box-sizing: border-box;
}
body {
    font-size: 1.35em;
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    background: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
}
p {
    font-size: 15px;
    line-height: 1.5;
}
.container {
    margin: 45px auto;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
}
.item {
    color: #fff;
    padding: 15px;
    margin: 5px;
    background: #3db5da;
    border-radius: 3px;
}

and now flexbox and media queries:

@media (min-width:769px) {
    .container{
        display: flex;
        flex-wrap: wrap;
    }
    .item{
        flex: 1 50%;
    }
}

The Only way it kinda works is if I set the basis at 33% which does not really make sense in my head so this is why I ask when we set the basis at 50%, it's 50% of what? What I'm I missing?

Thanks

5 Answers

Darrell Osborne
Darrell Osborne
23,145 Points
Darrell Osborne
Darrell Osborne
23,145 Points

It is 50% of the flex-container, but the item margin: 5px is causing it to wrap starting with the item-2.

There are a couple of work arounds, but maybe the 33% is the easiest since you have the grow set to 1.

Darrell Osborne
Darrell Osborne
23,145 Points
Darrell Osborne
Darrell Osborne
23,145 Points

Think of it this way: you can set your basis to be 45%, and then the right and left margin to be 2.5% each. That would also work.

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

Well, Thank you, Christian, for asking the question and Osborne for answering with patience... Thank you, both.

Christian Pineault
Christian Pineault
7,291 Points
Christian Pineault
Christian Pineault
7,291 Points

Your right it works without the margins, but why does it work in is code? What is different?

Darrell Osborne
Darrell Osborne
23,145 Points
Darrell Osborne
Darrell Osborne
23,145 Points

His margin is set to zero. If the background-color of his columns were anything other than white, you would see they are right up against each other also. The padding is the only space you see between them. If you add margin 5px to his .col class, his will do exactly as yours does.

Christian Pineault
Christian Pineault
7,291 Points
Christian Pineault
Christian Pineault
7,291 Points

ok great it works! So basically margins on items can create some kind of bug with flexbox?

Darrell Osborne
Darrell Osborne
23,145 Points
Darrell Osborne
Darrell Osborne
23,145 Points

It's not a "bug". (I edited my first answer to try not to confuse the issue)

Think about the "box-model". The margin falls outside of the border. Your flex-basis value is the starting size of your "item". In this case that would be 50%, and because you have "box-sizing: border-box" the 50% size includes the padding and the border, but not the margin. So once the margin is added to your "item", it becomes 50% plus 5px of your container width. Being more than 50% now, only 1 can fit on a line. Therefore it wraps to the next line and then grows to the full width because of the flex-grow property being set to 1.

Christian Pineault
Christian Pineault
7,291 Points
Christian Pineault
Christian Pineault
7,291 Points

Ok got it thanks. Sorry I can't put a best answer on your comment but you really did help. Thanks again.