Session 05 - CSS and Flex and Responsive CSS
Examples

• Example 5.1 - box sizing  
  <img src="https://via.placeholder.com/400x50/000000/ffffff.png?text=400px+wide+image"/><div class="dog sizing"> Dog <pre>width: 400px; box-sizing: border-box;</pre></div><div class="cat"> Cat <pre>width: 400px; box-sizing: content-box;</pre></div><img src="https://via.placeholder.com/520x50/000000/ffffff.png?text=520px+wide+image"/><div class="goat"> Goat <pre>width: 400px;</pre></div> .dog { box-sizing: border-box; } .cat { box-sizing: content-box; } .goat { box-sizing: unset; } div { margin: 20px; font-size: xx-large; background-color: rgb(230,230,230); padding: 20px 40px; text-align: left; width: 400px; border: 20px outset rgb(220,220,255); } div pre { font-size: x-large;} img { margin-left: 20px;} JSFiddle - Example 5.1
• Example 5.2 - box sizing  
  <ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul> ul, li { margin-left: 0; padding-left: 0;} ul { list-style: none; overflow: auto; background-color: #ffffdd; border: thin solid black;} li { box-sizing: border-box; padding: 1rem; margin: 1rem; float: left; width: calc(33% - 2rem); font-weight: bold; text-align: center; border: 5px dotted green; } JSFiddle - Example 5.2
• Example 5.3 - Flex  
  <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; } JSFiddle - Example 5.3
• Example 5.4 - Flex  
  <div id="f4container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>#f4container { display: flex; } .box1 { flex-basis: 15%; background-color: lightpink; } .box2 { flex-basis: 25%; background-color: lightsteelblue; } .box3 { flex-basis: 50%; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; } JSFiddle - Example 5.4
• Example 5.5 - Flex  
  <div id="f5container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>#f5container { display: flex; } .box1 { flex-grow: 1; flex-shrink: 1; flex-basis: 200px; background-color: lightpink; } .box2 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; background-color: lightsteelblue; } .box3 { flex-grow: 1; flex-shrink: 1; flex-basis: 500px; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; } JSFiddle - Example 5.5
• Example 5.6 - Flex Wrap  
  <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; } JSFiddle - Example 5.6