<div class='flex-container' id='flexContainer' style='align-items: stretch; justify-content: flex-start;'>
This page demonstrates some of the properties of FlexBox. Specifically, we can see how the justify-content and align-items properties' values affect a page's display
FlexBox makes use of a container (usually a div element) by setting its display property to flex. Inside of flex-containers, nested elements are referred to as flex-items. Any HTML content outside of flex-containers is arranged via vanilla CSS rules
Unlike vanilla CSS, FlexBox makes use of two axes - the Main axis (horizontal) and the Cross axis (vertical). The justify-content property arranges flex-items horizontally while the align-items property arranges flex-items vertically
The buttons on the sidebar simulate shrinking the width of the display (adding the flex-wrap: wrap property/value to the flex-container). This illustrates how FlexBox automatically arranges content based on display width
The text in the first box is significantly bigger than the other two. This allows us to see the difference between align-items: flex-start and align-items: baseline. Baseline arranges the content along the bottom (base) line of the largest font