justify-contentとは｜align-itemsとの違いと効かない原因6つ

justify-content は「主軸」の上でしか働きません。どのプロパティが何を動かすかを先に図にします。

flowchart LR
    A[動かしたいもの] --> J[主軸の並び全体<br>justify-content]
    A --> I[交差軸の各アイテム<br>align-items]
    A --> C[折り返した行のまとまり<br>align-content]
    A --> S[gridの枠の中の位置<br>justify-items]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS の上で、Python 3 の http.server を 127.0.0.1 のポートに起動して自分で書いたテストページを配信し、Playwright 1.63.0（Python）から Chromium 153.0.8010.12（ヘッドレス、表示幅 900px）で開きました。親要素は幅 600px、アイテムは幅 100px・高さ 40px の箱を3つ（column のときは親の高さ 400px・箱の高さ 60px）とし、各値を当てたあとの位置を getBoundingClientRect() で親の左上からの距離として読み取り、計算値は getComputedStyle() で確かめました。座標はすべてこの実測値です。値の定義と「フレックスボックスでは stretch は flex-start と同じ」「justify-items はフレックスボックスでは無視される」といった仕様の記述は MDN（CSS Box Alignment の各ページ）で確かめました。図は mermaid-cli 11.16.0 で描画を確かめています（確認日 2026年10月29日）。

justify-contentとは（意味と書く場所）

この節では、justify-content が何を決めるプロパティで、どの要素に書くのかが分かります。

justify-content は、フレックスコンテナーの主軸、グリッドコンテナーのインライン軸（横書きなら横方向）に沿って、アイテムの間や周囲の余白をどう配るかを決めるプロパティです。 MDN は次のように定義しています。

CSS の justify-content プロパティは、フレックスコンテナーの主軸、グリッドおよび段組みコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

書く場所は親要素です。子要素に書いても何も起きません。次の2行で、3つのアイテムが親の横幅の中央に集まります。

.row {
  display: flex;            /* これが無いと justify-content は働かない */
  justify-content: center;  /* 主軸（横）の並びを中央へ */
}

justify-content が動かしているのはアイテムではなく、親の中で余った空間です。余った空間が 0 なら、どの値を指定しても見た目は変わりません。これが「効かない」原因の半分を説明します。

各値の位置をChromiumで計測した表（flex）

この節では、12個の値を同じ条件で描画したときに、3つの箱がどこに置かれるかが数値で分かります。

幅 600px の親に 100px の箱を3つ入れ、余白 300px がどう配られるかを計測しました。数値は親の左端から各箱の左端までの距離（px）です。

表から分かることを3つにまとめます。

space-between・space-around・space-evenlyの違い

この節では、名前が似ている3つの値で、余白がどう割られるのかが計算で分かります。

3つとも「余白を等分する」値ですが、等分する単位が違います。余白 300px・箱3つの場合の計算は次のとおりです。

space-around で「端の余白が内側の半分になる」のは、箱ごとに両側へ 50px ずつ付けた結果、隣り合う箱の間では 50＋50＝100px になるためです。見た目を均等にしたいときは space-evenly を選びます。

アイテムが1つだけのとき

箱を1つにして同じ値を当てると、次のようになりました。

space-between は、アイテムが1つのときに先頭へ寄ることを覚えておくと、「2つ目を消したら左に寄ってしまった」という不具合をすぐ説明できます。

flex-direction: columnで軸が入れ替わる（実測）

この節では、縦並びにしたときに justify-content がどの方向を動かすのかが分かります。

flex-direction: column にすると主軸が縦になり、justify-content は縦方向の配置を決めます。親の高さ 400px に 60px の箱を3つ（余白 220px）で計測した、親の上端からの距離です。

注目するのは left と right です。主軸が縦のとき、left・right は「左右」という方向が主軸に無いため start として扱われ、right を指定しても下には行きません。MDN にも「主軸がインライン軸と平行でない場合は start のように動作する」と書かれています。縦並びで下へ寄せたいときは flex-end か end を使います。

row-reverse では flex-start と start が分かれる

flex-direction: row-reverse にすると、flex-start は「主軸の先頭＝右端」、start は「書字方向の先頭＝左端」を指すようになり、結果が分かれました。

direction: rtl を親に付けた場合も、flex-start の箱1 は 500px、つまり右端から並びました。flex-start は「flex の主軸の先頭」、start は「文字を書き始める側」です。

justify-contentとalign-itemsの違い

この節では、いちばんよく混同される align-items との役割の違いが分かります。

justify-content は主軸の「並び全体」を、align-items は交差軸（主軸と直角の方向）で「各アイテム」をそろえます。row のときは justify-content が横、align-items が縦です。

縦横の中央寄せは、両方を組み合わせて作ります。

.center-both {
  display: flex;
  justify-content: center;  /* 横（主軸）の中央 */
  align-items: center;      /* 縦（交差軸）の中央 */
  height: 300px;            /* 縦に余白が無いと align-items は見た目に出ない */
}

column にすると担当が入れ替わり、縦の中央が justify-content、横の中央が align-items になります。

flexbox 全体の使い方と早見表は、関連記事「CSS flexboxの使い方早見表｜横並び・中央寄せのコピペ集と効かない原因」で扱っています。この記事は justify-content だけを深く掘ります。

align-content・justify-items・justify-selfとの違い

この節では、名前が似た4つのプロパティがそれぞれ何を動かすのかが一覧で分かります。

「content」が付くものは余白の配り方（並び全体）、「items」「self」が付くものは枠の中でのアイテムの位置、「justify」は主軸・インライン軸、「align」は交差軸・ブロック軸です。この2軸の組み合わせで6つに分かれます。

「flex では無視される」は実測でも確かめました。幅 600px の flex 親で2番目の箱に justify-self: end を付けると、計算値は end になりましたが位置は 100px のまま（変化なし）でした。同じ指定を grid（150px のトラック3列）で行うと、2番目の箱は 150px から 200px へ動き、トラックの右端に寄りました。flex で特定の1つだけ右に寄せたいときは、justify-self ではなく margin-left: auto を使います。

wrap したときの align-content

flex-wrap: wrap で2行に折り返したとき、行のまとまりを縦に動かすのは align-items ではなく align-content です。高さ 200px の親に 250px の箱を4つ入れて（2行、各行の高さ 40px）計測しました。

「wrap したら縦中央にならない」というつまずきは、この表の2行目の状態です。align-items ではなく align-content: center に変えると直ります。

Gridでのjustify-contentの意味（トラックと中身）

この節では、grid で justify-content と justify-items が別のものを動かすことが数値で分かります。

grid の justify-content は「トラック（列の枠）」を親の中で動かし、justify-items は「枠の中のアイテム」を動かします。同じ「center」でも動く対象が違います。

justify-content：トラックごと動く

幅 600px の親に grid-template-columns: repeat(3, 100px)（合計 300px）を指定し、余白 300px を justify-content で配りました。結果は flex の表と1px の違いもなく一致しました。

ただし grid には効かない条件があります。列を 1fr や auto で作ると、トラックが親の幅いっぱいに伸びて余白が 0 になり、justify-content は見た目に出ません。justify-content を使うのは、px や max-content のように幅が決まった列のときです。

justify-items：枠の中で動く

列を repeat(3, 150px)（枠 150px、箱 100px）にして justify-items を当てた結果です。箱はそれぞれの枠の中で動き、枠自体は 0・150・300px から動きません。

幅を指定した箱（100px）は stretch でも伸びず、幅 auto の箱だけが 150px に伸びました。grid の初期値 normal は「伸ばせる箱は stretch、固有の幅を持つ箱は start」として働きます。

grid の列の作り方（repeat・fr・minmax）は、関連記事「CSS Gridの使い方｜repeat・fr・minmaxとコピペ用レイアウト集」で扱っています。flex と grid のどちらを選ぶかは、関連記事「FlexboxとGridの使い分け｜同じUIを両方で作り3つの画面幅で実測比較」で扱っています。

gapとjustify-contentの併用（実測）

この節では、gap を指定したときに justify-content の余白がどう計算されるかが分かります。

gap は先に確保され、残った余白を justify-content が配ります。幅 600px・100px×3 に gap: 20px を足すと、配れる余白は 600−300−40＝260px になります。

grid に column-gap: 20px を付けた場合も、start・center・space-between・space-evenly の結果は上の表と同じ値でした。

使い分けの目安は次のとおりです。

• 隙間を固定したい（ボタンの間を必ず 16px にする）→ gap で指定し、justify-content は寄せる側（flex-start・center・flex-end）だけを決める。
• 親の幅に合わせて隙間を伸び縮みさせたい（ナビの項目を両端にそろえる）→ space-between・space-evenly を使い、gap は「最低限の隙間」として小さめに入れる。

place-contentの短縮（align-contentとjustify-contentを1行で）

この節では、2つの content 系プロパティをまとめて書く place-content の書き方と、値の順番が分かります。

place-content は「align-content justify-content」の順で2つの値を取り、1つだけ書くと両方に同じ値が入ります。Chromium で計算値を読み取った結果です。

grid で「中身を縦横とも中央に置く」最短の書き方は次の2行です。

.box {
  display: grid;
  place-content: center;  /* align-content: center; justify-content: center; と同じ */
}

flex の align-content は wrap した複数行にしか効かないため、1行の flex で縦中央にするには align-items: center が要ります。flex は justify-content ＋ align-items、grid は place-content、と覚えておくと書き間違いが減ります。同じ短縮に place-items と place-self があります。

justify-contentが効かない原因6つ（再現と結果）

この節では、justify-content が効かない原因を6つに分けて、それぞれ Chromium で再現した結果が分かります。

6つとも「親が flex/grid でない」か「配る余白が無い」か「別の仕組みが先に余白を取っている」のどれかに当てはまります。再現はすべて幅 600px の親と 100px の箱で行い、箱1 の位置を読み取りました。

原因1：親が flex でも grid でもない

display: block の親に justify-content: center を書くと、計算値には center が入りますが、箱は 0px に縦積みのままでした。子に display: inline-block を付けて横に並べても、箱は 0・100・200px から動きません。justify-content はブロックレイアウトでは働かないためです。

対照として、同じ block の親に align-content: center を付けると、高さ 200px の中で箱が 40px から始まり、縦中央にそろいました。Chromium 153 ではブロックレイアウトでも align-content が効きますが、justify-content は効きません。横に寄せたいなら display: flex を付けます。

原因2：配る余白が無い

display: inline-flex や width: fit-content にすると、親の幅は中身と同じ 300px になり、余白が 0 なので center でも箱1 は 0px のままでした。子に flex: 1 を付けた場合も、3つの箱が 200px ずつに伸びて余白を使い切り、位置は 0・200・400px でした。アイテムが1つで width: 100% のときも同じです。

直し方は「余白を作る」ことです。親に幅を持たせる（display: flex か width を指定）、子の flex: 1 と width: 100% を外す、のどちらかです。

原因3：折り返した行のまとまりは align-content

flex-wrap: wrap で2行になると、縦中央にするのは align-items ではなく align-content です（前の節の表）。justify-content 自体は各行の中で効き続けており、各行の箱1 は 50px（親 600px に 250px×2 の余白 100px を半分ずつ）でした。

原因4：margin: auto が余白を先に取る

箱1 に margin-left: auto を付けて justify-content: center にすると、3つの箱は 300・400・500px、つまり右端に寄りました。auto マージンは justify-content より先に余白を吸い取る決まりで、auto マージンが余白を取りきると justify-content の取り分は 0 になります。

全部の箱に margin: 0 auto を付けて justify-content: flex-end にした場合は、50・250・450px と space-around のような並びになり、flex-end は無視されました。margin を 0 8px のような固定値に変えると 260・376・492px となり、右端に寄りました。

/* 効かない例：auto マージンが余白を先に取る */
.item { margin: 0 auto; }
.row  { display: flex; justify-content: flex-end; }  /* 無視される */

/* 直した例：固定値にする、または auto を外す */
.item { margin: 0 8px; }

逆に、この性質を使って「左にロゴ、右にメニュー」を作れます。メニューだけに margin-left: auto を付けると、justify-content を書かなくても右端に寄ります。margin の効き方全般は、関連記事「CSS marginとpaddingの違い｜相殺と効かない原因一覧」で扱っています。

原因5：inline 要素に書いている

span の親に justify-content: center だけを書くと、親の display は inline のままで、幅は中身の文字分（26.67px）しかなく、子の span も inline のまま並びました。同じ span の親に display: flex を足すと、display は flex、幅は 600px になり、子の span は block 扱いになって 150・250・350px の中央に並びました。

要素の種類（div か span か）は関係なく、display: flex があるかどうかで決まります。display の値ごとの違いは、関連記事「CSS displayの種類一覧｜block・inline・noneの違い」で扱っています。

原因6：はみ出すと center で左が切れる（safe）

幅 300px の親に縮まない 100px の箱を4つ（合計 400px）入れて center にすると、箱1 は −50px、つまり左 50px が親の外に出ました。overflow: auto にしても scrollLeft の最小値は 0 で、左にはみ出した部分はスクロールしても見えませんでした。

safe を前に付けると、はみ出すときだけ start に切り替わり、収まるときは center のままです。column（高さ 100px に 60px×3）でも、center は −40px、safe center は 0px でした。grid でも同じ結果です（幅 200px に 100px×3 で、center は −50px、safe center は 0px）。横スクロールするカルーセルやタブで「中央寄せにしたら最初の項目が消えた」ときは、この原因です。

.tabs {
  display: flex;
  overflow-x: auto;
  justify-content: safe center;  /* 収まるときは中央、はみ出すと先頭から */
}

Chromium 153 では CSS.supports('justify-content', 'safe center') が true でした。対応していないブラウザーのために、flex-start を先に書いて safe center で上書きする書き方にしておくと、少なくとも左が切れることはありません。

効かないときの確かめ方（手順）

この節では、効かない原因を DevTools で順番に切り分ける手順が分かります。

原因6つは、親の display → 親の幅と余白 → 子の margin と flex → wrap の有無、の順に見ると数分で特定できます。

Chrome の DevTools では、Elements の flex コンテナーに付く「flex」バッジを押すと、主軸・交差軸と各アイテムの余白が重ねて表示されます。Styles パネルの display: flex の横にあるアイコンから開く flexbox エディターでは、justify-content や align-items の値をボタンで切り替えられます。どの値が合うかを試すときに使えます（Chrome for Developers「Inspect CSS flexbox」）。

どの値を使うかの判断表

この節では、作りたい並びから justify-content の値と組み合わせるプロパティを選べます。

「寄せる」なら位置の値、「散らす」なら space-系、「1つだけ別の場所」なら margin: auto です。

1. 1全部を左（先頭）に詰める → 何も書かない（normal）隙間は gap で。flex-start を明示してもよい
2. 2全部を中央に集める → centerはみ出す可能性があれば safe center
3. 3全部を右（末尾）に寄せる → flex-end（end）column で下に寄せるときも flex-end。right は column で効かない
4. 4両端にそろえて間を等間隔 → space-between1つだけになると左に寄る。ヘッダーのロゴとメニュー向き
5. 5両端にも同じ隙間 → space-evenlyspace-around は端が半分になる。均等に見せたいなら evenly
6. 61つだけ反対側に置く → その子に margin-left: autojustify-content は書かない（auto マージンが先に効く）
7. 7grid の枠の中で寄せる → justify-items / justify-self枠ごと動かすなら justify-content（列幅が px のとき）

要素を中央に置く方法を目的別にまとめた早見表は、関連記事「CSS 中央寄せ｜divを縦・横・上下左右に置く早見表と効かない原因10」で扱っています。

よくあるつまずきと見え方

この節では、エラーにはならないのに見た目が意図と違う典型を、DevTools でどう見えるかとあわせて確かめられます。

CSS はプロパティが効かなくてもエラーを出しません。手がかりは Computed の値と、Styles の打ち消し線・警告アイコンだけです。

テキストの件は実測でも確かめました。幅 300px の箱を center で置くと箱は 150px に来ますが、中の文字は箱の左端 150px から始まりました。箱に text-align: center を足すと文字は 284px（箱の中央）に動きました。justify-content が動かすのは箱で、箱の中の文字は text-align の担当です。擬似要素の件も、親に ::before（幅 30px）を付けて space-between にすると、箱は 120・310・500px となり、::before が0番目のアイテムとして左端を取っていました。

• 1親に display: flex か grid があるComputed の display で確かめる。子に書いても効かない
• 2親の中に配る余白があるinline-flex・fit-content・flex: 1・width: 100%・1fr の列は余白を 0 にする
• 3子に margin: auto が無いauto マージンは justify-content より先に余白を取る
• 4動かしたい方向が主軸であるcolumn なら縦が主軸。横は align-items。wrap の縦は align-content
• 5はみ出すなら safe を付けているcenter・flex-end は先頭側が切れる。safe center で start に戻る
• 6擬似要素と文字の位置を分けて考える::before はアイテム、箱の中の文字は text-align

よくある質問

この節では、justify-content について検索されることの多い疑問に短く答えます。

Q. justify-content と align-items はどちらが横でどちらが縦ですか。

A. flex-direction: row（初期値）なら justify-content が横、align-items が縦です。column にすると入れ替わります。「justify は主軸、align は交差軸」と覚えると、方向が変わっても迷いません。

Q. flex-start と start はどう違いますか。

A. 通常の横並びでは同じ結果（0・100・200px）でした。row-reverse や direction: rtl では、flex-start は主軸の先頭（右）、start は文書の先頭（左）に分かれます。flex だけで使うなら flex-start、grid と共通にしたいなら start が無難です。

Q. space-around と space-evenly はどちらを使えばよいですか。

A. 両端の余白を内側と同じにしたいなら space-evenly（75・250・425px）、両端を内側の半分にしたいなら space-around（50・250・450px）です。見た目を均等にしたい場面では space-evenly のほうが意図どおりになります。

Q. justify-content: center が効きません。

A. 親に display: flex（または grid）があるか、親に余白があるか、子に margin: auto が無いか、の順に確かめます。この3つで大半が見つかります。残りは column による軸の入れ替わり、wrap の align-content、はみ出しの safe です。

Q. grid で justify-content: center にしても動きません。

A. 列を 1fr や auto で作っていると、トラックが親いっぱいに伸びて余白が 0 になります。枠ごと寄せたいなら列幅を px や max-content にする、枠の中で中身を寄せたいなら justify-items: center を使います。

Q. 特定の1つだけ右に寄せたいときは。

A. その子要素に margin-left: auto を付けます。flex では justify-self が無視されるため使えません。grid なら justify-self: end が使えます。

Q. 中央寄せにしたら左が切れて見えなくなりました。

A. 中身が親より大きいときの center の仕様です。justify-content: safe center にすると、はみ出すときだけ先頭揃えに切り替わります。Chromium 153 で −50px が 0px になることを確かめました。

Q. justify-content はブロック要素（display: block）には使えませんか。

A. Chromium 153 で試した範囲では、block の親に書いても位置は変わりませんでした。同じ親で align-content: center は縦中央に効きました。横に寄せたいなら display: flex を付けるか、text-align: center（インラインの中身）や margin: 0 auto（幅のあるブロック）を使います。

Q. place-content の値の順番は。

A. align-content、justify-content の順です。place-content: center space-between と書くと、縦（align-content）が center、横（justify-content）が space-between になることを計算値で確かめました。

Q. アイテムを縦にも横にも中央にしたいときの最短の書き方は。

A. flex なら display: flex; justify-content: center; align-items: center; の3行、grid なら display: grid; place-content: center; の2行です。親に高さが無いと縦の余白が無く、縦中央は見た目に出ません。

まとめ

この節では、記事全体の要点を5つにまとめます。

• justify-content は親要素に書き、主軸（flex は flex-direction の向き、grid は横）の余白を配るプロパティです。動かしているのは余白で、余白が 0 なら何も起きません。
• 幅 600px に 100px×3 のとき、先頭の位置は center 150px・space-between 0px・space-around 50px・space-evenly 75px でした。真ん中の箱はどれも 250px です。
• align-items は交差軸の各アイテム、align-content は折り返した行のまとまり、justify-items・justify-self は grid の枠の中の位置を決めます。flex では justify-items・justify-self は無視されます。
• 効かない原因6つは、親が flex/grid でない・余白が無い・wrap で align-content・margin: auto が先に取る・inline 要素のまま・はみ出して先頭が切れる、です。順に DevTools の Computed で確かめます。
• はみ出す可能性があるときは safe center、1つだけ反対側に置くなら margin-left: auto、grid の縦横中央は place-content: center と覚えておくと、書き直しが減ります。

参考・出典

確認日はいずれも 2026年10月29日です。

• MDN「justify-content」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/justify-content
• MDN「justify-items」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/justify-items
• MDN「align-items」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/align-items
• MDN「align-content」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/align-content
• MDN「place-content」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/place-content
• MDN「フレックスボックスでのボックス配置」：https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Box_alignment/In_flexbox
• MDN「グリッドレイアウトでのボックス配置」：https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Box_alignment/In_grid_layout
• W3C「CSS Box Alignment Module Level 3」：https://www.w3.org/TR/css-align-3/
• W3C「CSS Flexible Box Layout Module Level 1」8.2 Axis Alignment: the justify-content property：https://www.w3.org/TR/css-flexbox-1/#justify-content-property
• Chrome for Developers「Inspect CSS flexbox」（DevTools の flex バッジと Layout パネル）：https://developer.chrome.com/docs/devtools/css/flexbox
• Playwright「Browsers」：https://playwright.dev/python/docs/browsers

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。