justify-self not working in Flexbox issue [Solved]

# justify-self not working in Flexbox issue [Solved]

The justify-self CSS property doesn't work in flexbox because we are always dealing with moving the entire group of items around when it comes to flexbox.

You can set the margin-left CSS property to auto if you need to align a flex item to the right.

index.css

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        display: flex;
        border: 1px solid black;
      }

      .right {
        margin-left: auto;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="left">Left-aligned text</div>
      <div class="right">Right-aligned text</div>
    </div>

    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

setting margin left to auto to align flex item to right

The code for this article is available on GitHub

We set the margin-left CSS property on the element that has a class of right to align it to the right.

Here is an example where the parent div only contains 1 flex item with its margin-left property set to auto.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      .box {
        display: flex;
        border: 1px solid black;
      }

      .right {
        margin-left: auto;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="right">Right-aligned text</div>
    </div>

    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

only one flex item with margin left auto

The code for this article is available on GitHub

As noted in this section of the MDN docs, you can't use justify-self in flexbox because it justifies all flex items as a group.

If you have two flex items that you need to align to the left and right, you can also set the justify-content CSS property to space-between.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }

      .box {
        display: flex;
        border: 1px solid black;
        justify-content: space-between;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="left">Left-aligned text</div>
      <div class="right">Right-aligned text</div>
    </div>

    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

align flex items left and right with justify content space between

When the justify-content CSS property is set to space-between, the flex items are evenly distributed within the container along the main axis.

The spacing between each pair of adjacent items is the same.

Let's look at a different example.

Here is the starting point.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin-top: 100px;
      }

      .box {
        display: flex;
        border: 1px solid black;
      }

      .right {
        margin-left: auto;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <p>First</p>
      <p>Second</p>
      <p>Third</p>
      <p class="right">Fourth</p>
    </div>

    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

flex item aligned to right side

The code for this article is available on GitHub

We set the margin-left CSS property on the past p element to auto to align it to the right.

index.css

Copied!
.right {
  margin-left: auto;
  margin-right: auto;
}

If you also set the margin-right CSS property on the same element to auto, you will center it in the remaining space.

also setting margin right on the css element to auto

Now suppose, we want to have the first p element aligned to the left, the next two centered and the fourth p element aligned to the right.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin-top: 100px;
      }

      .box {
        display: flex;
        border: 1px solid black;
      }

      p {
        padding: 0px 5px;
      }

      .right {
        margin-left: auto;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <p>First</p>
      <p class="right">Second</p>
      <p>Third</p>
      <p class="right">Fourth</p>
    </div>

    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

left center and right align flex items

The only thing we had to change to center the middle two p elements in the remaining space is to set the margin-left CSS property on the second p element to auto.

index.html

Copied!
<div class="box">
  <p>First</p>

  <p class="right">Second</p>
  <p>Third</p>

  <p class="right">Fourth</p>
</div>

And here is the right class.

index.css

Copied!
.right {
  margin-left: auto;
}

The code for this article is available on GitHub

Now the first p element is aligned to the left, the second two are centered and the last p element is aligned to the right.

Using this approach is responsive because we used auto margins and the empty space is distributed equally.

Half the left margin goes to the fourth p element and the other half goes to the second p element.

# Conclusion

The justify-self CSS property has no effect when using flexbox.

However, the property works when you use grid or the display CSS property is set to block.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

justify-self not working in Flexbox issue [Solved]