“He then employed the little-used CSS “float” property to float the content to the desired width”
Slides & resources https://noti.st/rachelandrew
Slide 17
“ It uses float:left, suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed”
Slides & resources https://noti.st/rachelandrew
<div> <span class=”inline”> <img src=”pxcat.jpg”>I am an inline thing </span> I follow the inline thing. <br>I am below the inline thing. </div>
Slides & resources https://noti.st/rachelandrew
<ul class=”list-group”> <li>Item One <span class=”badge”>2</span> </li> <li>Item Two <span class=”badge”>11</span> </li> <li>Item Three <span class=”badge”>4</span> </li> <li>Item Four <span class=”badge”>5</span> </li> </ul> Slides & resources https://noti.st/rachelandrew
Slide 54
<li>Item One <span class=”badge”>2</span> </li>
Slides & resources https://noti.st/rachelandrew
Slide 55
.list-group li { display: flex; justify-content: space-between; align-items: center; } <li>Item One <span class=”badge”>2</span> </li>
Slides & resources https://noti.st/rachelandrew
Slide 56
Slides & resources https://noti.st/rachelandrew
Slide 57
Slides & resources https://noti.st/rachelandrew
Slide 58
“Prior to alignment via justifycontent and align-self, any positive free space is distributed to auto margins in that dimension.”
Slides & resources https://noti.st/rachelandrew
Slide 59
nav li:last-child { margin-left: auto; }
Slides & resources https://noti.st/rachelandrew
Slide 60
“The specification describes a CSS box model optimized for user interface design.”
Slides & resources https://noti.st/rachelandrew