I want to show you a way I often use flex, which is a box within a box. I often start a project with paper and pencil and just draw boxes and lines on the page. I can’t draw, so that’s as good as it gets. But it shows me how the page is going to be laid out and where I need a div that I will use flex with. A flexbox is the div you give the value of flex for its display property.

Each numbered box is a flexbox, meaning that div has the display property with the value of flex. The flex designation affects the next tier of elements under it. Flex on box 1 puts DIVs 2 and 3 next to each other. It does not affect the specific layout of any of the other boxes or elements.

Flex on box 2 with a direction of column will line up the items in that DIV into a column. Box 3 puts boxes 4 and 5 into a column. Flex on box 4 puts boxes 6 and 7 side by side while those boxes each have a column of information.

That column of information could be an image with a caption or source citation. It doesn’t have to really look like a column, just things you want placed over and under each other.

Drawing out your boxes before you start writing your HTML will help you see where you need DIVs.

You could give each of those boxes a class of flexbox and the column DIVs a class of column. Then in your CSS you just write,

.flexbox {display: flex; }

.column {flex-direction: column;}

and it will apply to all of those boxes. You don’t need an individual ID on each unless you need something specific to happen with that part of the page.

You can see this lesson.