## Flex and Wrap

Example 4.17 - Flex Wrap - Example 4.17<div id="f6container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div><div class="box box6">6</div></div>#f6container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: linen; border: thin solid black; } .box1, .box2, .box3, .box4, .box5, .box6 { flex-grow: 0; flex-shrink: 0; flex-basis: 28%; box-sizing: border-box; margin: 1rem 0; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;} .box6 { background-color: turquoise;} .box { padding: 2em; border: medium solid black; }

- Markup
- Style
- Display

     <div id="f6container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
       <div class="box box4">4
       </div>
       <div class="box box5">5
       </div>
       <div class="box box6">6
       </div>
     </div>

In `style` element (`<style>`) within `head` element:

    #f6container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      background-color: linen;
      border: thin solid black;
    }
    .box1, .box2, .box3, .box4, .box5, .box6 {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 28%;
      box-sizing: border-box;
      margin: 1rem 0;
    }
    .box1 { background-color: lightpink;}
    .box2 { background-color: lightsteelblue;}
    .box3 { background-color: wheat;}
    .box4 { background-color: plum;}
    .box5 { background-color: palegreen;}
    .box6 { background-color: turquoise;}
    .box {
      padding: 2em;
      border: medium solid black;
    }

1
2
3
4
5
6