What I learned from Flexbox Froggy: Container Properties

In the interest of learning Flexbox during bootcamp, I tried my hand at the brilliant Flexbox Froggy challenge. I completed all 24 levels, but in a pattern-matching, brute-force kinda way. By the end, I felt like I had learned nothing.

Today, months later, I decided to try my hand again at Flexbox Froggy. Here's what I learned.

Define your container and set the display property to flex

.myContainer {
  display: flex;
  // everything else goes here
}

Define the main axis of (the contents of) your container

Most often, you'll want your items to be ordered from first to last. But should they be laid out from left-to-right, or from top-to-bottom?

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  flex-direction: column;
}

Options

• Left-to-right: flex-direction: row (if you want it right-to-left, choose flex-direction: row-reverse)
• Top-to-bottom: flex-direction: column (if you want it bottom-to-top, choose flex-direction: column-reverse)

Let your items wrap (or don't)

By default, all your items to be confined to a single row (or a single column, if you chose flex-direction: column above). If you want your items to wrap to the next line once they run out of space, choose flex-direction: wrap. Lastly, if for some reason you want the wrapping to be reversed, choose flex-direction: wrap-reverse

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  flex-wrap: wrap;
}

Horizontally align your items

You're probably already familiar with text layout that is left-aligned, right-aligned, and center-aligned. You can, of course, align your items the same way, using justify-content.

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  justify-content: flex-end;
}

Options

• left align: justify-content: flex-start
• right align: justify-content: flex-end
• center align: justify-content: center

Vertically align your items

justify-content concerns alignment along the "main axis" (aka the horizontal axis). align-items concerns alignment along the "cross axis" (aka the vertical axis).

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  align-items: flex-end
}

Options

• align-items: flex-start: vertically align items to the top of the container
• align-items: flex-end: vertically align items to the bottom of the container
• align-items: center: vertically align items to the center of the container
• align-items: stretch: vertically stretch items from the top of the container to the bottom of the container
• align-items: baseline: vertically center each item to the baseline of the container that text sits upon

Distribute your items

The more interesting settings for justify-content are space-between, space-around, and space-evenly:

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  justify-content: space-around;
}

Options

• justify-content: space-between: put all the space between your items, like x---x---x
• justify-content: space-around: surround each item with the same amount of space on either side of that item, like -x--x--x-
• justify-content: space-evenly: divide up all the available space before and after each item, like -x-x-x-x-

Distribute your whitespace

Imagine that you have a notebook-sized sheet of lined writing paper. Now, imagine that you only have 3 lines of text to write on that sheet of paper. You could start at the top of the page, which would leave the rest of the page below the text empty. You could put the text at the bottom of the page, leaving the top of the page empty. This is what align-content controls.

Example: Before

#pond {
  display: flex;
  flex-wrap: wrap;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

Options

• align-content: flex-start: rows of items are clustered at the top of the container, leaving whitespace below
• align-content: flex-end: rows of items are clustered at the bottom of the container, leaving whitespace above
• align-content: center: rows of items are clustered at the center of the page, leaving whitespace above and below
• align-content: space-between: items are distributed so that any available whitespace is between rows of items, but never above the first row of items or below the last row of items.
• align-content: space-around: items are distributed so that any available whitespace is between rows of items, including above the first row of items and below the last row of items.
• align-content: stretch: the items are stretched to fill all available space so there is no whitespace above or below a row of items.

Next: What I learned from Flexbox Froggy: Item properties!