【サンプルコードあり】HTML/CSSで flex-wrap: wrap;　が効かない場合の対処の方法

flex-wrap: wrap;　が効かない場合の対処方法は
いくつかの方法があります。

今回、ページを縮めた時に要素が下に折り返す
設定を下が、要素が縮むだけで折り返されない
状態になってました。

その解消法はいろいろあります。
その中の１つで今回実際に私の場合で
変更出来た方法を記事にしました。

今回私の場合の原因は、折り返し隊要素の
幅の指定が原因でした。

修正後はこんな感じになりました。

今回書いたコード
flex-wrap: wrap; の指定をする場所を間違ってる
flex-wrap: wrap; 親要素の幅指定
実際になってた状態
1. flex-wrap: wrap;がきいてない

今回書いたコード

HTML

<html>
 <body>
    <div class="m-cards">
          <div class="m-c-box">
            <h3 class="m-c-h3">外<span class="mojiiro-henkou">構</span>工事</h3>
            <p class="m-c-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>

          <div class="m-c-box">
            <h3 class="m-c-h3">造<span class="mojiiro-henkou">成</span>工事</h3>
            <p class="m-c-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>

          <div class="m-c-box">
            <h3 class="m-c-h3">土<span class="mojiiro-henkou">木</span>工事</h3>
            <p class="m-c-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>

          <div class="m-c-box">
            <h3 class="m-c-h3">リ<span class="mojiiro-henkou">フ</span>ォーム</h3>
            <p class="m-c-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div><!-- /.m-cards -->
 </body>
</html>

CSS

.m-cards {
max-width: 1200px;
display: flex;
margin-bottom: 56px;
justify-content: space-between;
flex-wrap: wrap;
}
.m-c-box {
/* width: 20%; */
width: 250px;
text-align: center;
padding: 30px 15px;
border: 3px solid #1d3ee1;
}
.m-c-h3 {
margin: 0;
margin-bottom: 15px;
font-size: 24px;
font-weight: 500;
}
.mojiiro-henkou {
color: #d33fd8;
}
.m-btnbox {
width: 30%;
margin: auto;
text-align: center;
}
.m-btnbox-text {
display: inline-block;
font-size: 24px;
color: #fff;
padding: 10px 50px;
border-radius: 40px;
background-color: #63B13C;
}

他のflex-wrap: wrap; の指定をしても
効かない方法も記載します。

flex-wrap: wrap; の指定をする場所を間違ってる

flex-wrap: wrap; は親要素に、display: flex;を設定
してるところに指定する必要があります。

flex-wrap: wrap; 親要素の幅指定

要素の折り返しをする囲いの幅の指定をしてないと
折り返されません。

親要素での幅の指定の確認が必要です。

今回は、上記２つをチェック修正したが、flex-wrap: wrap;
は効かない状態でした。

実際になってた状態

flex-wrap: wrap;がきいてない

失敗時に書いてたCSSコード

CSS

.m-cards {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
/* margin-bottom: 56px; */
padding: 50px;
justify-content: space-between;}
.m-c-box {
width: 20%;
/* width: 250px; */
text-align: center;
padding: 30px 15px;
margin-bottom: 30px;
border: 3px solid #1d3ee1;
}
.m-c-h3 {
margin: 0;
margin-bottom: 15px;
font-size: 24px;
font-weight: 500;
}
.mojiiro-henkou {
color: #d33fd8;
}
.m-btnbox {
width: 30%;
margin: auto;
text-align: center;
}
.m-btnbox-text {
display: inline-block;
font-size: 24px;
color: #fff;
padding: 10px 50px;
border-radius: 40px;
background-color: #63B13C;
}

CSSの内容変更して

色々検証したらBOXの幅の指定が原因の感じ
だったんで、width: 20%; 指定を
width: 250px;に変更すると、折り返しができました。

↓　　↓　　↓

実際に書いたCSS

CSS

.m-cards {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
/* margin-bottom: 56px; */
padding: 50px;
justify-content: space-between;}
.m-c-box {
/* width: 20%; */
width: 250px;
text-align: center;
padding: 30px 15px;
margin-bottom: 30px;
border: 3px solid #1d3ee1;
}
.m-c-h3 {
margin: 0;
margin-bottom: 15px;
font-size: 24px;
font-weight: 500;
}
.mojiiro-henkou {
color: #d33fd8;
}
.m-btnbox {
width: 30%;
margin: auto;
text-align: center;
}
.m-btnbox-text {
display: inline-block;
font-size: 24px;
color: #fff;
padding: 10px 50px;
border-radius: 40px;
background-color: #63B13C;
}

今回やってみて、最初はflex-wrap: wrap;が効いてない
と思ってましたが、実際はwidth20%で指定してた為、
幅が縮むと同時に、子要素も縮んでflex-wrap: wrap;
の適用サイズが遅くなってるだけのようでした。

折り返しが効かない場合は試してください。
プログラミング・コーディングにはいろんな方法があります。
今回この記事の内容は一例として参考にして下さい。