Learning to Code: Day 26 — Flexbox Part 2

Good evening ya’ll. I signed up to GitHub yesterday and was very impressed by how it works. It’ll take me a couple tries before I get the handle of it but it’s definitely worth looking into, not very user friendly I’ll admit. But very useful I’m sure. Alright let’s get back into Flexbox.

The Justify-Content Property

We can define the spacing around the flex elements along that axis with the handy justify-content property. There are several values that we can write following this property:

center : the most commonly used, this aligns the flex items to the center of the container along the main axis.

flex-start : moves the flex items to the start of the main axis, so in a row that’s the left side, and in a column that’s the top of the container. This is also the default when no justify-content is defined.

flex-end : sets the items to the end of the main axis line, so the right-side for a row, and the bottom for a column.

space-between : this aligns the items on the line with the first item at the beginning limit and the last item at the end limit with even spacing between the middle items.

space-around : the same as space-between, however the first and last items have half-space around them too, and doesn’t touch the limits of the axis.

space-evenly : like the space-around, however the spacing is even across the axis with the two outer flex items having full-space on the ends of the container.

Use the Justify-Content in the Tweet Embed

before..
…after

The Align-Items Property

So the cross-axis intersects the main-axis, and acts as a left or right positioning on columns or up and down positioning on rows.

And with it come these set of values:

flex-start : align items at the start of the container on the cross-axis. So on rows that’s the top and on columns that’s the left side.

flex-end : aligns items at the end of the cross-axis. So on rows thats the bottom, and on columns thats the right side.

center : this aligns items to the center on the cross-axis with equal spacing.

stretch : this stretches the flex items over the span of the cross-axis and is the default if no value for the align-items is given.

baseline : aligns the items to the baseline, imagine if they sat on the cross-axis.

Applying the Align-Items to the Twitter Embed

before…
…after

Aaaaand let’s call it there. I have a big day tomorrow and it’s super late now, I was fixing a door for the last couple hours so forgive me for this being so late. Catch ya’ll next time!

Step by step, learning to code with FreeCodeCamp