## CSS Flexbox

- MDN: Basic Concepts of Flexbox
- CSS Tricks: A complete Guide to Flexbox

### Container and Items

1. Set up your flex container
2. Set the "flex" properties on the items within your container

Example 4.14 - Flex - Example 4.14<div id="f3container"><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>#f3container { display: flex; } .box1, .box2, .box3, .box4, .box5 { flex-grow: 0; flex-shrink: 0; flex-basis: 5em; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;} .box { padding: 2em; border: medium solid black; width: 3em; }

- Markup
- Style
- Display

     <div id="f3container">
       <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>

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

    #f3container {
      display: flex;
    }
    .box1, .box2, .box3, .box4, .box5 {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 5em;
    }
    .box1 { background-color: lightpink;}
    .box2 { background-color: lightsteelblue;}
    .box3 { background-color: wheat;}
    .box4 { background-color: plum;}
    .box5 { background-color: palegreen;}
    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }

1
2
3
4
5