CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

yoav green
yoav green
7,434 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
140,612 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: