【VScode】【悲報】flex-wrapかけてるのに全然折り返す様子がない

こんな悩みがある人にオススメの記事
・コーディング練習中の人
・flex-wrapが効かない沼に陥った人

flex-wrap、正解と不正解
不正解の場合、要確認事項
【悲報】全部間違ってないのに効かない
原因は、リセットCSSだった

flex-wrap、正解と不正解

【正解例】

flex-wrap: wrap;とは。

Flexboxレイアウトにおいて、子要素が親要素の幅を超えたときに自動的に折り返して次の行に配置されるようにするためのプロパティ。

上記画像の番号1〜4のリストのような形。ここでは2で折り返して次の行へいってます。

これが上手くコードが効いていないと、
リストが縦に並んでしまったり、横並びでギュッと収まってしまったりします。

【不正解例】

不正解の場合、要確認事項

▼私が記述したCSS

【親要素】
.about-item ul {
display: flex;　→１
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 40px;
}

【先頭文字の装飾】
.about-item ul li::first-letter {
font-size: 40px;
float: left;
padding-right: 5px;
}

【子要素】
.about-item ul li {
width: 50%;　→２
text-align: left;
line-height: 2;
padding: 2%;
clear: both;
}

1、親要素に display:flex を適用しているか

親要素に display:flexが適用された場合にのみ効果あり。
書き忘れ、間違えて子要素に記述していないか。

こぐまマミー

親要素にdisplay:flex;を書いている。OK

２、子要素に適切な width が設定されているか

子要素のサイズが適切に設定されていないと、折り返しがうまくいかないことがある。
％表示ではなく、px表記にするとうまくいったという情報もあった。

こぐまマミー

子要素にwidth: 50%;を書いている。OK

３、親要素のサイズが固定されているか

親要素のサイズが固定されていない場合、子要素が折り返さないことがある。
私の場合、親要素ulを囲っているwrapperにサイズ指定をかけてある。

【親要素を囲むdiv】
.about-wrapper {
width: 70%;　→３
text-align: center;
margin: 0 auto;
}

こぐまマミー

親要素を含むｗrapperにwidth: 70%;を書いている。OK

４、ブラウザによる互換性

Safariだとflexが効かない可能性がある。
GoogleChromeで検証してみる。

こぐまマミー

どっちも変わらない。OK

５、デバッグ、エラーはないか

VScode、使用しているエディタ内で表記のエラーは検出されていないか。
Markup Validation Serviceでも念の為チェック。

こぐまマミー

何のエラーもなし。OK

６、その他もろもろ

そもそものテキスト量、アイテム量が足りていない。
親要素をはみ出すように量が必要。

flex-direction:column（縦並びになる）
を指定している場合は親要素にheightを入れる。

こぐまマミー

テキスト増やしても同じだった。columnにはしてない。OK

【悲報】全部間違ってないのに効かない

正直絶望しました。

コーディングはどれだけググれるかとの戦いではあるんです。

しかしながらFlexbox使ってて、
ここまで意味がわからないことがなかったのでお手上げです。

ええ〜どうして？しかも悔しいのでドツボにハマるんですよね。

解決したい、
次にやる時はうまくいくかもしれないから先に進もうか、
いや解決しないと前に進めない・・・。

みたいな気持ちがせめぎ合うんです。

こぐまマミー

そして解決しました。何時間悩んだのか！こんな単純なことで！！

原因は、リセットCSSだった

信じられません！原因はリセットCSSでした！

記述のせいじゃないんかい、ですよね。

全然違うところを何時間も粗探ししていたんですよ。
なんて滑稽な姿。泣ける。

ここまでエラーがないとするならば、
何かが不具合を起こしているとしか考えられません。

というわけで、CSS内ではなく、
HTML内のheadにある以下の記述です。

<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>COFFEE</title>
<link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css” />
<link rel=”stylesheet” href=”css/style.css” />
</head>

赤ラインの部分にリセットCSSを読み込んでいます。

私は最初、自分で持っていたリセットCSSファイルを読み込んでいたんです。

そこをCodejumpさんが使用しているものに合わせて変えてみました。

そしたらスンッと。
スンッとflex-wrapしてくれました。

自前のファイルに記載してあるコードとの相性が悪くて不具合を起こしていたようです。
それか、きちんと読み込めていなかった可能性も。

Flexboxをはじめ、コードは合っているのに効かない！
という問題が解決しない場合は、リセットCSSを疑ってみるのもありです。

こぐまマミー

flex-wrapについてこんなに考えることになるなんて、一生忘れない

長時間悩みましたが、いい勉強になりました。

勉強中の方、共にがんばりましょう！