Learning Flexbox

Flexbox Froggy is a game that helps you gain practice with flexbox properties. It's a fun game that you should try!

justify-content is a CSS property that aligns items along the main axis. The default main axis is row but you can set it to column with flex-direction: column. So if your main axis is row, then justify-content will align items horizontally. But if you reset it to column, then the alignment will be done vertically. This is an important distinction and one that is not clear in Flexbox Froggy because on their Level 2 page they state that the property aligns items horizontally.

Possible values for this property are flex-start, flex-end, center, space-between, space-around and space-evenly.

When the main axis is the row, flex-start aligns items to the left side of the flex container, with flex-end items align to the right side of the flex container. If main axis is column, then flex-start will align flex items to the top of the flex container and flex-end will align them to the bottom of the container.

With space-between, there is no space to the left of the first item or to the right of the last item. The space between all the items is equal. So items display with equal spacing between them as Flexbox Froggy states.

space-around puts equal spacing between the items but adds space to the left and to the right of the first and last items that is equal to half the space in between items. Flexbox Froggy says that space-around is equal spacing around items.

Then, space-evenly similar to space-around except that the left and the right spacing is equal to the space that is between the items instead of being half.

align-items is a CSS property that aligns items on the cross axis. So there's the main axis that you can set to row or column and your cross axis is the perpendicular to your main axis. If you main is row, then align-items will do the alignment vertically since the cross axis is the perpendicular y-axis.

The values for this property are flex-start, flex-end, center, baseline and stretch. Assuming the default value of row for the main axis, flex-start will align items to the top of their container, flex-end will align items to the bottom of the container, and center will align items to the vertical center of their flex container. Just keep in mind that if the main axis was the column, then flex-start will align items to the left of their container, flex-end will align them to the right.

flex-direction property can be set to row which causes the flex items to be displayed horizontally as a row. If set to column, then flex items are displayed vertically as a column. row-reverse and column-reverse are the same things but in reverse order. The default value for flex-direction is row.

flex-wrap property accepts nowrap, wrap, wrap-reverse. In nowrap, every item fits into a single line, in wrap, items wrap around to additional lines, wrap-reverse does the same in reverse. The default value is nowrap.

flex-basis property sets the size of the flex item along the main axis. If the main axis is row, then it controls the width, if main is column, then it controls the height. It can be set to px, percentages, or any other available units. flex-basis is a property for the flex items.

I wrote a Javascript program to produce the CSS rules for a Flexbox grid system, given a number of columns.

flex-flow property is a shorthand for flex-direction and flex-wrap. To set the main axis to row and set the flex-wrap to wrap, you can write, flex-flow: row wrap.

This file shows the difference flexbox can make for centering both horizontally and vertically (sometimes called the "holy grail" of CSS styling). You can achieve this by setting justify-content and align-items to center. Given flex-direction of row which is the default, first property aligns items horizontally, second property vertically.

For CSS Grid, there is Grid Garden.