## CSS Flex

MDN: Basic Concepts of Flexbox

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

Example 5.4 - Flex - Example 5.4 (Without Styles)<div id="f1container"><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>#f1container { display: flex; } .box { padding: 2em; border: medium solid black; width: 3em; } .box1, .box2, .box3, .box4, .box5 { flex: 0 0 5em; /* flex-grow flex-shrink flex-basis */ }

- 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 class="box box4">4
       </div>
       <div class="box box5">5
       </div>
     </div>

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

    #f1container {
      display: flex;
    }
    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }
    .box1, .box2, .box3, .box4, .box5 {
      flex: 0 0 5em; /* flex-grow flex-shrink flex-basis */
    }

1
2
3
4
5