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 Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

Posted by Steve Fang
Steve Fang
40 Points

How do I start a new flexbox row?

Currently everything is spanning one row, how do I make sections span a full row, and other blocks of content span a different row?

1 Answer

Tyler Dix
Tyler Dix
14,230 Points
Tyler Dix
Tyler Dix
14,230 Points

Hi Steve,

To add another row, simply add another div container with the same class. I just opened up the project files and tested it. Here's the markup for two FlexBox rows:

<!DOCTYPE html>
<html>
<head>
    <title>Multi-column Layout</title>
    <link rel="stylesheet" type="text/css" href="page-styles.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="main">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <p>
        <img src="img/sky.jpg" alt="sky">
        <p>
            Mauris ac leo id risus commodo auctor at at eros. Proin ultricies ante vel eros egestas vel venenatis arcu consequat. Nam auctor eros vitae nisl viverra sit amet malesuada turpis facilisis. Nullam diam dolor, aliquet vitae pellentesque blandit, varius at arcu. Proin convallis varius sollicitudin. Sed accumsan posuere eros quis placerat. Vestibulum sit amet malesuada elit. Quisque commodo egestas adipiscing. Nunc et neque non nisi consequat porta.
        </p>
        <p>
            Pellentesque non ultrices nisi. Ut auctor, massa vel hendrerit consectetur, augue mi vestibulum nibh, vitae ullamcorper lectus nisl in felis. Duis magna enim, elementum a sagittis aliquet, mattis quis erat. Sed imperdiet pulvinar fermentum. Integer posuere tellus vel eros ornare eu accumsan justo semper.   
        </p>
    </div>
    <div class="main"> <!-- this is the class that begins a new row -->
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <p>
        <img src="img/sky.jpg" alt="sky">
        <p>
            Mauris ac leo id risus commodo auctor at at eros. Proin ultricies ante vel eros egestas vel venenatis arcu consequat. Nam auctor eros vitae nisl viverra sit amet malesuada turpis facilisis. Nullam diam dolor, aliquet vitae pellentesque blandit, varius at arcu. Proin convallis varius sollicitudin. Sed accumsan posuere eros quis placerat. Vestibulum sit amet malesuada elit. Quisque commodo egestas adipiscing. Nunc et neque non nisi consequat porta.
        </p>
        <p>
            Pellentesque non ultrices nisi. Ut auctor, massa vel hendrerit consectetur, augue mi vestibulum nibh, vitae ullamcorper lectus nisl in felis. Duis magna enim, elementum a sagittis aliquet, mattis quis erat. Sed imperdiet pulvinar fermentum. Integer posuere tellus vel eros ornare eu accumsan justo semper.   
        </p>
    </div>
</body>
</html>

Notice I have two div containers with the class "main." This is how you create multiple rows.

Hope this helps.

Cheers,

Tyler