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 Flexbox Properties Smarter Layouts with flex-basis and flex

yoav green
yoav green
8,611 Points
Posted by yoav green
yoav green
8,611 Points

columns are still distributing with flex 

/* ================================= 
  Flexbox
==================================== */

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
/*
flex-grow: 1;
flex-basis: 200px;
*/
flex: 1 ; 
}

<!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">
            Item 1
            <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">
            Item 2
            <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">
            Item 3
            <p>Banksy squid distillery Portland whatever, lo-fi Wes Anderson.</p>
        </div>
        <div class="item-4 item">
            Item 4
            <p>Sriracha raw denim fixie.</p>
        </div>
    </div>
</body>
</html>

i though that if the flex value is 1 the columns suppose to stay next to each other. as soon as i get to about 500px the last one jumps blow the first three

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

With the "flex-basis" commented out as shown here, I'm not seeing the behavior you describe. I get 4 columns at all widths.

But if you remove the comment then it is correct for the last item to "wrap" (since "flex-wrap" is also set) when the total width is too small for each column to get at least 200 pixels.

BTW: Since you're studying flexbox, there's two really fun additional learning resources you should know about: