Slide 14 - CSS Flex § Session 05

CSS Flex

Set up your flex container
Set the "flex" properties on things within your container

Example 5.4 - Flex - Example 5.4 (Without Styles)

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 */
}