Learning to Code: Day 26 — Flexbox Part 2

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:

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:

before..
…after

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:

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:

before…
…after

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp