FexBox Example - flex-flow: row wrap

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>

        <div class="wrapper">
            <header class="header">Header</header>

            <aside class="aside aside-1">Aside 1</aside>

            <article class="main">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
            </article>

            <aside class="aside aside-2">Aside 2</aside>

            <footer class="footer">Footer</footer>
        </div>

    </body>
</html>


.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center; 
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%; 
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}

/* flex: 1 0 0 allows the asides to grow and take up available space, but not to shrink. 
/* This means when there's ample space within the row, they will sit side-by-side. */

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; } /*flex-grow: 3 (grow to fill extra space) flex-shrink:0 (can shrink if needed), flex-basis: 0px)*/
  .aside-1 { order: 1; } /*flex-shrink: 1 allows them to shrink. see above*/
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

/* grow, shrink and basis */

r9young / DECO7140-Final-Project

FexBox Example - flex-flow: row wrap #11