## flex-grow and flex-shrink

Example 5.6 - Flex - Example 5.6 (Without Styles)<div id="f1container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>.box { padding: 2em; border: medium solid black; width: 3em; } #f1container { display: flex; } .box1 { flex-grow: 1; flex-shrink: 1; flex-basis: 200px; } .box2 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } .box3 { flex-grow: 1; flex-shrink: 1; flex-basis: 500px; }

- Markup
- Style
- Display

     <div id="f1container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
     </div>

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

    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }
    #f1container {
      display: flex;
    }
    .box1 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 200px;
    }
    .box2 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 100px;
    }
    .box3 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 500px;
    }

1
2
3