CSS Flexbox
- MDN: Basic Concepts of Flexbox
- CSS Tricks: A complete Guide to Flexbox and a fantastic poster!
Container and Items
- Set up your flex container and properties of the container.
- Set the "flex" properties on the items within your container.
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> In style
element
(<style>) within head element:
#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;
}