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
Creating a flex property doesn’t always give us the right kind of spacing within the containing element. Also, there is a main axis that runs through the container for both flex row items and flex column items (horizontally and vertically, respectively). Here’s an example from w3.org showing the main axis:
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
Remember that tweet we looked at in the last lesson? Let’s apply a justify-content: space-around; to the .profile-name selector. Note the subtle change in the positioning of the twitter name and the space between the two titles:
The Align-Items Property
Along with the justify-content property, there’s the align-items property which moves properties along the cross-axis, instead of the main-axis. Let’s look again at the above explanation from w3.org:
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
Let’s apply a align-items:center; to the follow button, which is in a row, so will shrink vertically a little. Note the subtle changes with the before and 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!