【CSS】justify-content - コンテナーの主軸配置

CSSのjustify-contentプロパティをご紹介します。

検証環境

CSS

macOS

14.1

justify-content

justify-contentは“フレックスコンテナー・グリッドコンテナーの主軸配置”のプロパティです。

基本構文

justify-content: 値;

値

代表な値は次の通りです。

値	意味
start	先頭側に寄せる。
end	末尾側に寄せる。
center	中央に寄せる。
space-between	均等配置。（左右に余白なし）
space-around	均等配置。（左右に余白あり）

サンプル

start

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    justify-content: start;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

プレビュー

end

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    justify-content: end;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
</div>

プレビュー

center

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    justify-content: center;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
</div>

プレビュー

space-between

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    justify-content: space-between;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
</div>

プレビュー

space-around

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    justify-content: space-around;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
</div>

プレビュー