Harvard Extension School
CSCI E-12 Fundamentals of Website Development
| Fall 2024
Table of Contents
Session 05 - CSS, Part 3
Code Examples
Example 4.1 - Flex
Example 4.1
Codepen - Example 4.1
1
2
3
4
5
#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 4.1
Table of Contents