CSS flexで改行、折り返しさせる方法３選

flexは位置調整に便利なCSSです。

しかし、きちんと設定しないと横並びになり、しかも改行されません。

CSS display:flexで改行、折り返しさせる方法を3つ紹介します。

display:flexの基礎はこちら↓

【現象】widthを無視して改行されない

flexの子要素はwidthの合計が100％を超えても改行されません。

下記ではflexの子要素にwidth:50%を指定しています。子要素は4つあるので合計200％ですが、改行されていません。

<style>
.example{
    display: flex;
    border: 1px solid #333;
    padding: 10px;
    background: #d9eff7;
}
.example>div{
    border: 1px solid #333;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
    background: #FFF;
}
</style>
<div class="example">
    <div>要素1</div>
    <div>要素2</div>
    <div>要素3</div>
    <div>要素4</div>
</div>

これを改行する方法を3つ紹介します。

【改行方法1】flex-wrap:wrap

「flex-wrap」はflexとセットで使い、子要素の改行を指定するCSSです。

初期値は「flex-wrap: nowrap」となっており、改行しません。

「flex-wrap: wrap」と指定すると改行されます。

<style>
.example2{
    display: flex;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    padding: 10px;
    background: #d9eff7;
}
.example2>div{
    border: 1px solid #333;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
    background: #FFF;
}
</style>
<div class="example2">
    <div>要素1</div>
    <div>要素2</div>
    <div>要素3</div>
    <div>要素4</div>
</div>

【改行方法2】divなどで囲う

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

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

ただし、flexの影響がなくなるため横並びにもなりません。

<style>
.example3{
    display: flex;
    border: 1px solid #333;
    padding: 10px;
    background: #d9eff7;
}
.example3>div{
    width: 100%;
}
.example3>div>div{
    border: 1px solid #333;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
    background: #FFF;
}
</style>
<div class="example3">
    <div>
        <div>要素1</div>
        <div>要素2</div>
        <div>要素3</div>
        <div>要素4</div>
    </div>
</div>

【改行方法3】flex-direction:columnを指定する

「flex-direction」はflexとセットで使い、子要素の並びの向きと方向を指定するCSSです。

初期値は「flex-direction: row」であり、横並びに左から右へ並びます。

「flex-direction: column」と指定すると、縦並びに上から下へ並びます。

<style>
.example4{
    display: flex;
    /*コレ*/flex-direction: column;
    border: 1px solid #333;
    padding: 10px;
    background: #d9eff7;
}
.example4>div{
    border: 1px solid #333;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
    background: #FFF;
}
</style>
<div class="example4">
    <div>要素1</div>
    <div>要素2</div>
    <div>要素3</div>
    <div>要素4</div>
</div>

【まとめ】flexで改行させる方法

1. flex-wrap:wrap
2. divなどで囲う
3. flex-direction:columnを指定する

以上、CSS display:flexで改行、折り返しさせる方法でした。