What I learned from Flexbox Froggy: Item 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 about item properties (to see what I learned about children properties, click here. (Spoiler: it's all about overriding the settings of the container)

Override the container's order

We use flex-direction to define the main axis and thus the order of a container. That should be good enough, right? Well, if for some reason you want to define the order of your items as distinct from the defined order of the parent container, here's an example:

Example: Before

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

Example: After

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

Override the container's vertical alignment

We use align-items to specify the alignment of the contents of a container along the cross-axis. If you want to override that, you can use align-self like we do here:

Example: Before

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

.yellow {
  // nothing here yet
}

Example: After

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

.yellow {
  align-self: flex-end;
}

Options

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

Next up: What I DIDN'T learn from Flexbox Froggy!