## Session 04 - CSS, Part 2 - including Flexbox
Code Examples

- Example 4.1 - contextual selectors
  Example 4.1
  <div><em>Emphasized text</em> outside of <strong>li</strong> appear "normal". <ul><li><em>Emphasized text</em> within <strong>li</strong> have a different style. </li></ul></div> li em { color: red; background-color: navy;}
- Example 4.2 - box sizing
  Example 4.2
  <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; /* default box-sizing, which is content-box */</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;}
- Example 4.3 - Box Sizing - 25% is not 1/4
  Example 4.3
  <div class="full"><p>Container - 100%</p><div class="quarter">One (25%)</div><div class="quarter">Two (25%)</div><div class="quarter">Three (25%)</div><div class="quarter">Four (25%)</div></div> div.quarter { width: 25%; border: 2px dashed purple; background-color: rgb(240, 200, 240); float: left; overflow: auto; text-align: center; padding-top: 1rem; padding-bottom: 1rem; } div.full { width: 100%; border: 2px solid black; overflow: auto; }
- Example 4.4 - Box Sizing - 25% is 1/4
  Example 4.4
  <div class="full"><p>Container - 100%</p><div class="quarter">One (25%)</div><div class="quarter">Two (25%)</div><div class="quarter">Three (25%)</div><div class="quarter">Four (25%)</div></div> div.quarter { width: 25%; box-sizing: border-box; border: 2px dashed purple; background-color: rgb(240, 200, 240); float: left; overflow: auto; text-align: center; padding-top: 1rem; padding-bottom: 1rem; } div.full { width: 100%; border: 2px solid black; overflow: auto; }
- Example 4.5 - Flex
  Example 4.5
  <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; }
- Example 4.6 - Flex
  Example 4.6
  <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; }
- Example 4.7 - Flex
  Example 4.7
  <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; }
- Example 4.8 - Flex Wrap
  Example 4.8
  <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; }
- Example 4.9
  Example 4.9
  <nav><ul><li><a href="#">Planet</a></li><li><a href="#">Solar System</a></li><li><a href="#">Galaxy</a></li><li><a href="#">Universe</a></li></ul></nav>nav ul { display: flex; } nav ul { list-style: none; } nav ul li { margin-left: 1em; }
- Example 4.10 - box sizing
  Example 4.10
  <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.33% - 2rem); font-weight: bold; text-align: center; border: 5px dotted green; }