【サンプルコードあり】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>

<html>

<body>

<p class="m-c-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

</div>

</div>

</div>

</div>

</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;
}

.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;
}

.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;
}