markdown Flexbox Cheatsheet

Posted 2021-05-06

Flexbox Explained

For each of the directions below, add these declarations to the existing ul or li elements.

The first grouping has to do with the flex-container, or the ul in this example.

1. ul { display: flex; }
This gets everything on a single line. By default, the direction is in a row and in standard order.

2. ul {display: flex; flex-direction: ***; }
*** can equal row, row-reverse, column, column-reverse
This takes the elements and places them in a single row or a single column. Ordering is either in source order or the reverse of the source order. Flex-direction defines our main axis.

3. ul { display: flex; flex-direction: as before, flex-wrap: ***;}
*** can equal wrap, wrap-reverse, or nowrap
flex-direction orders the individual items.
flex-wrap orders the rows/columns created

4. ul { display: flex; flex-flow: ***;}
flex-flow is shorthand for flex-direction and flex-wrap
It takes two arguments, just like the individual properties.
Example: row wrap, row-reverse wrap, column nowrap, column-reverse wrap-reverse, etc
Just because the row/column is reversed does not mean the wrap has to be reversed

5. ul { display: flex; flex-flow: row wrap; justify-content: ***; }
*** can equal flex-start, flex-end, center, space-between, space-around
Justify content determines the distribution of the flex-items within the flex-container on the main axis — in other words, how should space be allocated relative to the width of each item?
If flex-direction is row, then horizontal is the main axis. When flex-direction is column, then column is the main axis.

6. ul { display: flex; flex-flow: row wrap; justify-content: center;  height: 400px;}
This artificially gives our row some height. In the next step, we’ll try some cross axis alignment. Since we’re working with a row, the cross axis is the vertical axis.

7. ul { display: flex; flex-flow: row wrap; justify-content: center;  height: 400px; align-items: ***}
*** can equal flex-start, flex-end, center, baseline, stretch
This aligns our items on the cross axis. Since we’re working with a row currently, this is aligning elements in vertical space. 



The next set of properties are about the individual flex-items, or the li’s in this example.

8. .flex2{ border: 2px dotted blue; order: ***; }
*** can be an integer.
1 will move the .flex2 boxes to the end of the list, while -1 will move them to the start of the list. 0 is neutral. The border styling is to help us differentiate between the li’s with the .flex2 class and those that don’t have it.

9. .flex2{ border: 2px dotted blue; flex-basis: ***; }
flex-basis is analogous to width, but not quite the same thing. Width is an absolute measurement — an element is that wide, all the time. We can measure width in relative units (say 25% instead of 250px), but in the end, the measurement itself never changes. For flex-basis, we try to achieve a given width with the space available. It could be smaller than this width, or it could be wider, depending on the extra space and how that’s supposed to be distributed. Distribution of extra space is controlled by flex-grow and flex-shrink (below).

10. .flex2{ border: 2px dotted blue; flex-grow: ***; }
*** can be 0 or a positive integer. (It won’t break with a negative integer, but it won’t do anything either.)
Flex-grow, like flex-shrink (below), distributes extra space once each element is displayed on the page. In this example, our flex-items are center-aligned (see justify-content: center on the ul). By assigning a value to flex-grow, any extra space will be assigned in greater proportion to this element, making it larger relative to the other items. Note there is no unit with this measurement — it’s simply a proportion.

11. .flex2{ border: 2px dotted blue; flex-shrink: ***; }
*** can be 0 or a positive integer. (It won’t break with a negative integer, but it won’t do anything either.)
Flex-shrink controls what happens to extra space as elements shrink.  By assigning a value to flex-shrink, as elements get smaller on the page, this element will get smaller faster than the others. Note there is no unit with this measurement — it’s simply a proportion.

12. .flex2{ border: 2px dotted blue; flex: G S B; }
G = flex-grow
S = flex-shrink
B = flex-basis
This is the shorthand for combining flex-grow, flex-shrink, and flex-basis.