How to Right-Align a Flex Item

Have you ever wondered how you can right align a flex item? If so, this snippet is for you.

Before the introduction of Flexbox, aligning elements seemed like the most difficult problem in web design. Now, alignment has become quite simple, since Flexbox allows us to align items and groups of items properly.

In this snippet, we’re interested in the case, when we need to align a flex item to the right. For that, you can use the CSS justify-content property with the “space-between” value on the flex container. Let's see how this can be done, and then, we'll also discuss some examples with other properties.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use an <h2> element.
  • Use a <div> element with a class named “main”.
  • Place two other <div> elements with the “align1” and “align2” classes into the first <div>.
  • Also, use <a> tags within the two <div> elements.
<h2>Example</h2>
<div class="main">
  <div class="align1">
    <a href="https://www.w3docs.com/learn-html.html">HTML</a>
  </div>
  <div class="align2">
    <a href="https://www.w3docs.com/learn-css.html">CSS</a>
  </div>
</div>

Add CSS

  • Style the ”main” class by setting the display property to “flex” and the justify-content to “space-between”.
  • Style the “align1” and “align2” classes by specifying the background and border properties.
.main {
  display: flex;
  justify-content: space-between;
}

.align1,
.align2 {
  background: #e8e7e3;
  border: 1px solid #8a8a8a;
}

Let’s see the full code.

Example of aligning a flex item to the right:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main {
        display: flex;
        justify-content: space-between;
      }
      .align1,
      .align2 {
        background: #e8e7e3;
        border: 1px solid #8a8a8a;
      }
    </style>
  </head>
  <body>
    <h2>Example</h2>
    <div class="main">
      <div class="align1">
        <a href="https://www.w3docs.com/learn-html.html">HTML</a>
      </div>
      <div class="align2">
        <a href="https://www.w3docs.com/learn-css.html">CSS</a>
      </div>
    </div>
  </body>
</html>

Result

HTML
CSS

You can also align a flex item to the right by setting the CSS margin-right property. In our example below, we set the "auto" value of this property on the "align2" class.

Example of aligning a flex item to the right with the CSS margin-right property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main {
        display: flex;
      }
      a {
        text-decoration: none;
      }
      .align2 {
        margin-right: auto;
      }
      .align1,
      .align2,
      .align3 {
        background: #e8e7e3;
        border: 1px solid #8a8a8a;
        padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Example</h2>
    <div class="main">
      <div class="align1">
        <a href="https://www.w3docs.com/learn-html.html">HTML</a>
      </div>
      <div class="align2">
        <a href="https://www.w3docs.com/learn-css.html">CSS</a>
      </div>
      <div class="align3">
        <a href="https://www.w3docs.com/learn-git.html">GIT</a>
      </div>
    </div>
  </body>
</html>

Another way is using the CSS margin-left property. In our last example, you can see that we apply its "auto" value to the "last" class.

Example of aligning a flex item to the right with the CSS margin-left property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main {
        display: flex;
      }
      a {
        text-decoration: none;
        display: block;
        background-color: lightblue;
        padding: 10px 20px;
        color: #666666;
      }
      a:hover {
        background-color: blue;
        color: #ffffff;
      }
      .last {
        margin-left: auto;
      }
      div {
        background: #e8e7e3;
      }
    </style>
  </head>
  <body>
    <h2>Example</h2>
    <div class="main">
      <div>
        <a href="https://www.w3docs.com/learn-html.html">HTML</a>
      </div>
      <div>
        <a href="https://www.w3docs.com/learn-css.html">CSS</a>
      </div>
      <div>
        <a href="https://www.w3docs.com/learn-javascript.html">JavaScript</a>
      </div>
      <div class=last>
        <a href="https://www.w3docs.com/learn-git.html">GIT</a>
      </div>
    </div>
  </body>
</html>