As a , you’ll often find it difficult to understand the differences between “justify-content”, “align-items”, and “align-self”, here’s a quick break down on how to understand these properties and never get confused. This article assumes you have basic knowledge of classes, selectors, and flex. beginner CSS Remember the word “Justify”?,   Justify positions elements across the horizontal axis, regardless of what follows next, be it “items” “content” or “self”, more on that later. Take a look at the image below and notice the horizontal and vertical axis, this is going to be our container in all examples. “Align” position elements across the vertical axis regardless of what follows. Here’s the breakdown. Take a look at the image below The image above does not have any justify or align property set to it, Let’s apply the justify property to the flex-container and see what happens. { : flex; : center;
} .flex-container display justify-content Now the flex-items are positioned to the center horizontally but they are not in the center vertically, to position them to the center vertically, we’ll use the align property as shown below { : flex; : center;
} .flex-container display align-items The flex-items are now centered vertically, so what happens when we combine the two? { : flex; : center; : center;
} .flex-container display justify-content align-items We achieve a perfect center both vertically and horizontally. When using flex, the default direction is a row, so what happens when a flex-direction: column; is set to a container? Here’s where the confusion lie, The image below shows a typical example of a column direction applied to our initial container. NOTE: align-items still work across the vertical axis but because the container is now a column, it appears as if it is working across the horizontal axis. To move the flex-items to the center horizontally, we’ll have to use the “align” property instead of “justify” to achieve this. { : flex; : column; : center;
} .flex-container display flex-direction align-items We now know how to use “justify-content” and “align-items”. So what does “align-self” do and how is it used? Let’s add the align-self property to the first flex-item which is the first red box but before that, let’s give the first box a class of “up”, the will look like this code { : flex-start;
} .up align-self Here’s a summary of what we’ve learned so far: “justify” — controls an element across the horizontal axis. “align” — controls an element across the vertical axis. “self” — picks an individual flex-item in the container. Are we limited to just “center” and “flex-start”? There are a lot of values that can be used with “justify” and “align” they are but not limited to flex-start (default) flex-end center space-between space-around stretch space-evenly Below is a visual explanation of “justify-content” by . Javascriptual Special thanks to Roy Ntaate for reviewing this article. If there’s any correction or I missed something, please feel free to reach out to me as I am always learning. If you want to read more you can visit the . Mozilla developer website

Mozilla

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Flexboxes, Align and Justify Props, Explained

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps