display:flexで子要素を右端・左端にそれぞれ配置する方法

今回はdisplay: flexを使って子要素を右端・左端にそれぞれ配置する方法を紹介します。

すべて右寄せ・左寄せはもちろん、最初の要素だけ右寄せ、最後の要素だけ左寄せと言った柔軟なスタイルも簡単に指定できます。

 

display: flexで左寄せ

初期値の状態ですでに要素は左寄せになりますが、明示的に指定したい場合は以下のように指定します。

display: flexも一緒に指定しましょう。

.sample {
  display: flex;
  justify-content: flex-start;
}

 

display: flexで右寄せ

右寄せにするには以下のように指定します。

.sample {
  display: flex;
  justify-content: flex-end;
}

justify-content: flex-end;で右寄せになります。

 

両端に綺麗に揃える

最初と最後の要素はぴったり両端に配置し、真ん中の要素は等間隔で配置することもできます。

.flex-container {
  display: flex;
  justify-content: space-between;
}

子要素が複数あってもちゃんと等間隔で配置されます。

 

最初だけ左端に配置、それ以外は右端に配置

display: flexを使えば最初の要素だけを左端に配置し、他の要素は右端に配置するといったレイアウトも簡単に実現できます。

以下のようなコードになります。

.flex-container {
  display: flex;
  justify-content: flex-end;
}
.flex-container >:first-child {
  margin-right: auto;
}

最初の子要素だけmargin-right: auto;を指定することで、左端に配置することができます。

 

最後だけ右端に配置、それ以外は左端に配置

今度は逆に最後の要素だけを右端に配置し、他の要素は左端に配置してみます。

.flex-container {
  display: flex;
}
.flex-container >:last-child {
  margin-left: auto;
}

考え方は上と同じで、最後の要素にmargin-left: auto;を指定することで右端に配置しています。
こんな感じでdisplay: flexを使うと柔軟なレイアウトが簡単に実装できます。

かなり便利なプロパティなのでぜひ試してみてください。