cheatsheets/css.org

Flexbox

Try playing this game: http://flexboxfroggy.com/

The traditional CSS layout is crusty and does not work well for responsive design. display:inline; is great for vertical layouts and display:block; is great for horizontal layouts. But you can't mix and match both well, nor do these designs work well when the width and height of sections of your page are dynamic. With flexbox, one can create layouts that are designed to expand and contract depending on the device used, or as the browser page is manually adjusted.

To use flexbox, you need a parent container (flex container) and a child or children element/s.

The flex container can either be vertically or horizontally based. You can even specify the direction that the browser draws the elements on the screen. So not only can you specify a vertical top down layout like this:

<div>1</div>
<div>2</div>
<div>2</div>

| 1 | | 2 | | 3 |

You can also specify that the elements appear from the bottom up like this:

<div>1</div>
<div>2</div>
<div>2</div>

| 3 | | 2 | | 1 |

The same is true for horizontal layouts. They can look like:

<div>1</div>
<div>2</div>
<div>2</div>

| 1 | 2 | 3 |

OR

<div>1</div>
<div>2</div>
<div>2</div>

3

2

1

positioning

relative positioning

absolute positioning

When you position an element absolutely, it is fixed. If you put an absolute positioned element inside a div, then the div cannot calculate the height of the child.

<div class="I'm a regular div" style="background-color:blue">
<img style="position:absolute"></img>
</div>

It'll look like this:

./images/abs-pos-height.png

You can see that the containing div (the green box), cannot determine the height of the image. That is why, the green div is only 30 pixels or so tall. ¹

Footnotes

---

1. In actuality, it would only be 1 or 2 pixels tall, but I make it taller so you could see it.