CSS Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

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,228 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