Block elements, as a rule, always stack vertically - never side by side. Each block element effectively has a 'new-line' built into it, forcing the next piece of content down.
This can be circumvented using a system called Flexbox. Officially called the "Flexible Box Model", Flexbox is a relatively recent addition to CSS that makes creating rich, responsive layouts much easier. Flexbox allows us to specify whether the children of a given element should be arranged horizontally or vertically, how they should be positioned along that axis, and how much space they should take up.
A Flexbox layout therefore consists of two layers: the container element, which
we give the CSS properties display: flex; and flex-direction: <direction>;,
and the child elements, which will be arranged in that direction.
The most common choices for that <direction> will either be row or column.
If we choose, flex-direction: row; on the container element, its children will
be layed out like this:
If we choose flex-direction: column; we'll get this instead:
There's also a concept of a "cross axis", which is the axis perpendicular to
the one chosen by flex-direction:
We can use various other Flexbox properties to determine how elements are positioned along both axes.
We've definitely got some work to do. Here's what we want our site to look like:
To get there, we'll need to use some of the flex properties we just saw in the demo, as well as our knowledge of the box model. Once we've achieved the desired layout, lets commit our changes.
Add your markup between the <body> tags in flexbox-lab/index.html, and your styling in
flexbox-lab/main.css.
Help the frogs reach the correct lilly pads using flexbox properties
Finish early? Try these other flexbox games!