CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでフレックスアイテムをコンテナの末尾に揃える方法

CSSフレックスボックスレイアウトでは、justify-contentプロパティにflex-endという値を指定することで、フレックスアイテムを主軸方向の終端（デフォルト設定では右端）に寄せて配置できます。この記事では、具体的な使い方とサンプルコードをわかりやすく解説します。

justify-content: flex-endとは

justify-contentは、フレックスコンテナ内のアイテムを主軸（横並びの場合は水平方向）に沿ってどのように配置するかを制御するプロパティです。flex-endを指定すると、すべてのフレックスアイテムがコンテナの終端側にまとめて配置されます。左から右へ流れる通常の書字方向では、アイテムは右端に揃います。

サンプルコード

以下のコードでは、赤い背景のフレックスコンテナの中に4つの数値ブロックを配置し、justify-content: flex-end;によって右端に揃えています。コードをコピーしてブラウザで実際に動作を確認してみてください。

<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
  display: flex;
  background-color: red;
  justify-content: flex-end;
}
.mycontainer > div {
  background-color: #E6B0AA;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  width: 100px;
  margin: 5px;
}
</style>
</head>
<body>
<h1>Score</h1>
<div class="mycontainer">
  <div>20</div>
  <div>35</div>
  <div>88</div>
  <div>62</div>
</div>
</body>
</html>

実行結果のポイント

このコードを実行すると、赤い背景のコンテナ内にピンク色の4つのブロック（20・35・88・62）が表示され、それぞれがコンテナの右端側に寄せて整列します。もしjustify-contentを指定しなければ、初期値であるflex-startが適用され、アイテムは左端に揃う点に注意してください。

justify-contentで使える主な値

flex-end以外にも、配置を調整するための便利な値がいくつか用意されています。用途に応じて使い分けましょう。

  • flex-start：アイテムを先頭側（左端）に揃える（初期値）
  • flex-end：アイテムを末尾側（右端）に揃える
  • center：アイテムを中央に揃える
  • space-between：最初と最後のアイテムを両端に置き、残りを均等間隔で配置する
  • space-around：各アイテムの周囲に均等な余白を配して配置する
  • space-evenly：すべての間隔を完全に均等にして配置する

なお、縦方向の配置を調整したい場合は、align-itemsやalign-contentプロパティを使用します。主軸と交差軸の違いを理解しておくと、フレックスボックスのレイアウト制御がより自在に行えるようになります。

  1. CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)

    CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り

  2. CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方

    CSSのjustify-contentプロパティを使用すると、フレックスコンテナの主軸方向（デフォルトでは水平方向）に沿って子要素の間や周囲のスペースを分配し、柔軟に配置を制御できます。本記事では、複数のDIV要素を「左・中央・右」のように分散配置する方法を、具体的なコード例と表示結果とともにわかりやすく解説します。 justify-contentプロパティの構文 justify-contentは、display: flex;を指定した親要素（フレックスコンテナ）に対して設定します。基本の構文は以下のとおりです。 セレクタ {     display: