cancel
Showing results for 
Search instead for 
Did you mean: 
Learner II

Flexbox Grid tips and guides

Jump to solution

I've just started playing around with Flexbox grid (Canvas provided a great overview here) and am looking for more resources to help me figure it out. Does anyone have any favourite tips, tricks, or guides?

Tags (3)
11 Replies
Highlighted
Community Advocate
Community Advocate

Greetings Martha,

Using flexbox is really easy if you just want to put stuff in columns and you don't care if the content of each row (as a whole) is responsive.  The following code will create a row with 3 columns of equal width. Each column has a centered paragraph of text and the columns will not stack as the screen gets smaller.

<div class="grid-row">

    <div class="col-xs">

        <p style="text-align: center;">Row 1 - Column 1</p>

    </div>

   

    <div class="col-xs">

        <p style="text-align: center;">Row 1 - Column 2</p>

    </div>

   

    <div class="col-xs">

        <p style="text-align: center;">Row 1 - Column 3</p>

    </div>

   

</div>

So let's color-code the code above and show the result:

flexbox.png

The columns get closer together as the screen size gets smaller and the text will begin to wrap to the next line in each column so that each column can squeeze onto the page.

flexbox.gif

I'll put together another post at a later time that explains how to get things to stack as screen size gets smaller.