HTML一覧CSS一覧CSS一覧

フレックス

justify-content 主軸方向に子を寄せる

重要度5 / 5

意味

親要素の主軸(flex の初期では左右)に沿って、直下の子を寄せたり、余白を分配したりする場合に使います。flex-start、center、flex-end、space-between、space-around、space-evenly がよく出ます。

カンプの「左右中央」「両端揃え」は、ここです。text-align ではありません。上下の寄せは align-items です。grid では、マスの並び全体を親要素の中で動かす指定になります。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<div class="row">
  <span>A</span>
  <span>B</span>
</div>
CSS
.row {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  background: #f3f1ec;
  padding: 0.5rem;
}
.row > span {
  background: #efeef8;
  padding: 0.4rem 0.65rem;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome29〜
Firefox20〜
Safari9〜
Edge12〜
Chrome Android29〜
Safari iOS9〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)