マンガでわかるホームページ作成

CSS flexで中央寄せしつつ改行させる方法

中央寄せといえば今どきdisplay:flexですね。

しかし、display:flexで中央寄せしようとすると子要素が横並びになってしまいます。これを改行(縦並び)にしたい!

CSS display:flexで中央寄せしつつ改行させる方法を解説します。

display:flexの基礎はこちら↓

【基本】display:flexで中央寄せ

display: flexとjustify-content: centerを指定すると子要素を中央寄せにできます。

要素1
<style>
.example{
    display: flex;
    justify-content: center;
}
.example,.example>div{
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example">
    <div>要素1</div>
</div>

【現象】要素が2つあると横並びになってしまう

子要素が2つ以上あるとそれを横並びにしてしまいます。

要素1
要素2
<style>
.example{
    display: flex;
    justify-content: center;
}
.example,.example>div{
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example">
    <div>要素1</div>
    <div>要素2</div>
</div>

これを改行(縦並び)する方法を2つ紹介します。

【解決方法1】divなどで囲う

flexが効く範囲は子要素だけです。孫要素には影響ありません。

divなどで囲い孫要素にすることで改行されるようになります。

要素1
要素2
<style>
.example2{
    display: flex;
    justify-content: center;
}
.example2,.example2>div>div{
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example2">
    <div>
        <div>要素1</div>
        <div>要素2</div>
    </div>
</div>

【解決方法2】flex-direction:columnを指定する

要素1
要素2
<style>
.example3{
    display: flex;
    justify-content: center;
    /*コレ*/flex-direction: column;
}
.example3,.example3>div{
    border: 1px solid #333;
    padding: 10px;
}
.example3>div{
    width: 100px;
    margin: auto;
}
</style>
<div class="example3">
    <div>要素1</div>
    <div>要素2</div>
</div>

flex-direction: columnはflexの並びの方向を縦に指定するCSSです。

これだけでは今度中央寄せが効かなくなります。

子要素にwidthの指定とmargin: autoを指定することで中央寄せになります。

ただし、この方法は親要素がflexでなくても中央寄せになります。

親要素をどうしてもflexにしなければならず、かつdivなどで囲めないときに使ってみてください。

【まとめ】flexで中央寄せしつつ改行させる方法

divなどで囲いましょう。

以上、CSS display:flexで中央寄せしつつ改行させる方法でした。

関連記事