DEV Community

Cover image for Understanding Justify and Align in CSS
TheDevSpace
TheDevSpace

Posted on • Originally published at thedevspace.io

Understanding Justify and Align in CSS

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

After defining the layout, the next step is to deal with the alignment of items. There are nine different alignment properties, as shown in the list below:

  • align-content
  • align-items
  • align-self
  • justify-content
  • justify-items
  • justify-self
  • place-content
  • place-items
  • place-self

This is one of the most complex topics in HTML and CSS, as they do different things for different layout systems.

We'll start by discussing how they work inside a grid layout.

Grid layout

When it comes to aligning items in a grid, we have to talk about both row and column alignments. As an example, this is a grid with six items, and the grid container is 300px high:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  height: 300px;
}
Enter fullscreen mode Exit fullscreen mode

Row alignment

Visit Code Demo 🔗

The align-content property is used to specify how the rows are positioned in a multi-row grid or flex container. For a grid layout, the common values include:

  • start 
.container {
  align-content: start;
}
Enter fullscreen mode Exit fullscreen mode

align content start

  • end 
.container {
  align-content: end;
}
Enter fullscreen mode Exit fullscreen mode

align content end

  • center 
.container {
  align-content: center;
}
Enter fullscreen mode Exit fullscreen mode

align content center

  • space-between 
.container {
  align-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

align content space between

  • space-around 
.container {
  align-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

align content space around

  • space-evenly 
.container {
  align-content: space-evenly;
}
Enter fullscreen mode Exit fullscreen mode

align content space evenly

  • stretch 
.container {
  align-content: stretch;
}
Enter fullscreen mode Exit fullscreen mode

align content stretch

Visit Code Demo 🔗

align-items, on the other hand, is used to define how the items are positioned within their respective grid cell. Common values include:

  • start 
.container {
  align-items: start;
}
Enter fullscreen mode Exit fullscreen mode

align items start

  • end 
.container {
  align-items: end;
}
Enter fullscreen mode Exit fullscreen mode

align items end

  • center 
.container {
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

align items center

  • stretch 
.container {
  align-items: stretch;
}
Enter fullscreen mode Exit fullscreen mode

align items stretch

  • baseline 
.container {
  align-items: baseline;
}
Enter fullscreen mode Exit fullscreen mode

align items baseline

Visit Code Demo 🔗

Lastly, the align-self property works just like align-items, except it is used on individual grid cells. If the container has the align-items set, it will be overwritten by align-self.

.container {
  align-items: start;
}

#Item {
  align-self: end;
}
Enter fullscreen mode Exit fullscreen mode

align self

Column alignment

Visit Code Demo 🔗

The column alignment, controlled by the justify properties, works in a similar way. First, the justify-content property defines how grid items are distributed horizontally along the main axis. Some common values are:

  • start 
.container {
  justify-content: start;
}
Enter fullscreen mode Exit fullscreen mode

justify content start

  • end 
.container {
  justify-content: end;
}
Enter fullscreen mode Exit fullscreen mode

justify content end

  • center 
.container {
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

justify content center

  • space-between 
.container {
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

justify content between

  • space-around 
.container {
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

justify content around

  • space-evenly 
.container {
  justify-content: space-evenly;
}
Enter fullscreen mode Exit fullscreen mode

justify content evenly

Visit Code Demo 🔗

The justify-items controls how grid items are aligned horizontally within their cells. Some common values are:

  • start 
.container {
  justify-items: start;
}
Enter fullscreen mode Exit fullscreen mode

justify items start

  • end 
.container {
  justify-items: end;
}
Enter fullscreen mode Exit fullscreen mode

justify items end

  • center 
.container {
  justify-items: center;
}
Enter fullscreen mode Exit fullscreen mode

justify items center

  • stretch 
.container {
  justify-items: stretch;
}
Enter fullscreen mode Exit fullscreen mode

justify items stretch

Visit Code Demo 🔗

Similarly, the justify-self property is used on individual grid items to overwrite the default alignment rule set by justify-items.

.container {
  justify-items: start;
}

.item-sm {
  justify-self: end;
}
Enter fullscreen mode Exit fullscreen mode

justify self

Alignment in both directions 

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  height: 300px;

  place-content: center;
}
Enter fullscreen mode Exit fullscreen mode

This is the same as:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  height: 300px;

  align-content: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Visit Code Demo 🔗

Visit Code Demo 🔗

Visit Code Demo 🔗

Flex layout

The exact same alignment properties can be used for flexbox layouts. However, instead of row and column alignments, the justify properties deal with the alignment in the flexbox's main axis, which depends on the flex-direction property.

If flex-direction is set to row, the main axis is horizontal:

main axis row

When you change the flex-direction property, the main axis also changes.

main axis column

Visit Code Demo 🔗

Parallel to the main axis

The justify properties deal with alignments in the direction parallel to the flex main axis. For example, when the flex-direction is set to row:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  height: 400px;

  /* align-content: center; */
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

flex justify center row

And when the flex-direction is set to column:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  height: 400px;

  /* align-content: center; */
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

flex justify center column

Note that the justify-items and justify-self properties are ignored in a flex layout.

Also, instead of start and end, there are flex-start and flex-end, designed specifically for a flex layout. In most cases, the keywords start and end would also work for a flex layout, but you might need to use the flex-* keywords for the best browser compatibility.

Perpendicular to the main axis

On the other hand, the align properties deal with the alignment in the direction perpendicular to the main axis. When the flex-direction is set to row:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  height: 400px;

  align-content: center;
}
Enter fullscreen mode Exit fullscreen mode

flex align center row

And when the flex-direction is set to column:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  height: 400px;

  align-content: center;
}
Enter fullscreen mode Exit fullscreen mode

flex align center column

Unlike the justify properties, the align-items and align-self properties work in a flex layout.

Similarly, the place properties are a set of shorthand properties that allow you to define justification and alignment at the same time.

You may experiment with the above CodePen demo.

Read More

Follow us for daily coding tips:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

🎯 Mastering z-index: Control Element Stacking in CSS

z-index is used to control the order of elements when they are stacked on top of each other. The property accepts integer values, the higher the integer, the higher the order. For example,

<div class="item1">z-index: 1</div>
<div class="item2">z-index: 2</div>
<div class="item3">z-index: 3</div>
<div class="item4">z-index: 2</div>
<div class="item5">z-index: 1</div>

<div class="item">Try to change the z-index of this box</div>
Enter fullscreen mode Exit fullscreen mode 
div {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  text-align: center;
  padding: 20px;
  border: 1px solid orange;
  background-color: bisque;

  position: absolute;
}

.item {
  top: 0px;
  left: 0px;
  height: 300px;

  border: 1px solid skyblue;
  background-color: lightblue;
}

.item1 {
  top: 0px;
  left: 0px;

  z-index: 1;
}

.item2 {
  top: 50px;
  left: 50px;

  z-index: 2;
}

.item3 {
  top: 100px;
  left: 100px;

  z-index: 3;
}

.item4 {
  top: 150px;
  left: 50px;

  z-index: 2;
}

.item5 {
  top: 200px;
  left: 0px;

  z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

Visit Code Demo 🔗

By default, the box .item4 should be on top of .item3, but we configured their z-index values, and because .item3 has a higher order, it will be on top of all other elements.

You can also change the z-index of the blue box (.item) to see what happens.

Top comments (0)