タイトルどおり、今回はCSSでdisplay:flexを用いて横並びにした要素のうち、最後の要素を右寄せ配置にする方法を紹介する。

まず、以下のようなHTMLがあるとする。

<body>
  <div class="wrap">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>
</body>

3つのitem要素を横並びにし、3番目のitemのみ右寄せ配置に変更するCSS（SCSS）が次のコード。

.wrap {
  display: flex;
  .item {
    padding: 30px;
    background: #ddd;
    &:nth-child(even) {
      background: #eee;
    }
    &:last-child {
      margin-left: auto;
    }
  }
}

通常、display:flexで子要素の配置を変更する場合、justify-contentを使うところだが、今回の要件である一部の要素のみを右寄せに配置することができない。

last-child（最後のitem）にmargin-left:autoを設定しているところがポイントで、これで次のようなレイアウトを実現することができる。