Flex organizes our information on the page in a way that is flexible and adjusts with the size of the screen, but sometimes, we don’t want things organized in rows. Maybe we want them in a column.

Flex-direction, you might guess, does just that, changes your row into a column. This can be what you want from the beginning, but mostly I use this for when the screen gets really small, like on a cell phone. Instead of having a couple of things on each line, or maybe a couple on one line, one on the other, or however it might automatically organize itself, I change my rows into columns.

Flex-direction can take row, column, row-reverse, column reverse. Reverse starts your row on the opposite end. Row-reverse takes the first thing on your list and puts it on the far right of the screen and builds across the screen from there. Column-reverse, of course, puts your first item at the bottom of the column and builds up from there.

Justify-content is what we use to put the items in the center, or to put space between them, when we are dealing with rows. When you use that for columns, it’s still thing between the items, not on the page. It will not put them in the center of the page right to left. Think about, justify-content: space between would put space between the items in the column vertically. So justify-content: center would also be thinking vertically. There is a different property for getting your columns in the middle, align-content or align-items. You can use align-items: center to get your column in the middle of the page.

I suggest making a simple page with span elements that contain just the words one through ten and applying these flex properties to them and see what happens. Remember, the display property of flex and each of these properties, such as justify-content, flex-direction, and align-items all get applied to the div that the span items are inside of. You have to create a flex box, so to speak, to get started. Something like this.

You can see the lesson in action.