【CSS】flex-wrapが効かない、折り返さない原因と解決方法

「flex-wrap:wrapを指定したのに折り返さないんだけど!?」

flex-wrapが効かない、折り返さない原因と解決方法を解説します。

【原因1】display:flexを指定していない

flex-wrapはdisplay:flexとセットで使うCSSです。display:flexを指定していないと効きません。

<style>
.example{
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
    width: 50%;
}
.example>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

【解決方法】display:flexを指定する

display:flexを指定しましょう。

display:flexを指定すると要素が横並びになるのでわかりやすいかと思います。

<style>
.example2{
    /*コレ*/display: flex;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
    width: 50%;
}
.example2>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example2">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

display:flexが効いていないと意味がありません。下記も確認してみてください。

【原因2】flex-wrapを子要素に指定している

flex-wrapは折り返したい子要素に指定するものではありません。

<style>
.example3{
    display: flex;
    border: 1px solid #333;
    background: #aad7f4;
    width: 50%;
}
.example3>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example3">
    <div>その1</div>
    <div>その2</div>
    <div style="flex-wrap: wrap;">その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

【解決方法】親要素（display:flexとセット）に指定する

flex-wrapはdisplay:flexを指定した要素に合わせて指定しましょう。

<style>
.example2{
    /*コレ*/display: flex;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
    width: 50%;
}
.example2>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example2">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

【原因3】flex-direction:columnを指定している

flex-direction:columnを指定すると縦並びになります。

改行していないためflex-wrapが効いていないように見えます。

<style>
.example4{
    display: flex;
    flex-direction: column;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
    width: 50%;
}
.example4>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example4">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

【解決方法】heightを指定する

縦並びにしたまま折り返したいのであれば、親要素にheightを指定しましょう。

そのheightを超える部分で折り返されます。

<style>
.example5{
    display: flex;
    flex-direction: column;
    /*コレ*/height: 250px;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
    width: 50%;
}
.example5>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example5">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

【解決方法】flex-direction:columnを消す

flex-direction:columnにこだわる必要がないのであればflex-direction:columnを消してしまいましょう。

<style>
.example2{
    display: flex;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
    width: 50%;
}
.example2>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example2">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

【原因4】折り返すだけの量がない

flex-wrap:wrapを指定しても内容量が親要素を超えなければ折り返しようがありません。

<style>
.example6{
    display: flex;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
}
.example6>div{
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example6">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
</div>

【解決方法】内容量を増やす

子要素を増やすか、子要素にwidthを指定して、親要素を超えるようになれば折り返されます。

<style>
.example7{
    display: flex;
    /*コレ*/flex-wrap: wrap;
    border: 1px solid #333;
    background: #aad7f4;
}
.example7>div{
    /*コレ*/width: calc(33% - 42px);
    border: 1px solid #333;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
}
</style>
<div class="example7">
    <div>その1</div>
    <div>その2</div>
    <div>その3</div>
    <div>その4</div>
    <div>その5</div>
</div>

【まとめ】flex-wrapが効かない原因

• 【原因1】display:flexを指定していない
  →display:flexを指定する
• 【原因2】flex-wrapを子要素に指定している
  →親要素（display:flexとセット）に指定する
• 【原因3】flex-direction:columnを指定している
  →heightを指定する
  →flex-direction:columnを消す
• 【原因4】折り返すだけの量がない
  →内容量を増やす

以上、flex-wrapが効かない、折り返さない原因と解決方法でした。