【css】display: flex; が効かないときの原因の一例

最近、htmlやcss、javascriptなどを勉強しているのですが、cssで指定したdisplay: flex;が動作しない問題に遭遇しました。
原因がなかなかユニークなように感じたので、本記事で共有したいと思います。

display: flex;が動作しない問題

下記のようにbodyタグに対してdisplay: flex;を設定し、div要素を横並びさせたかったのですが横並びしませんでした。

style要素(一部)
body要素(一部)

上記のようなコードでブラウザ表示をすると下記のような結果になりました。

div要素が横並びしない。

対処した内容

上記の問題は、metaタグが正しく書けていないことが原因でした。
下記のように修正したところ、うまく表示されました。

修正前
修正後

下記のとおり、意図通りにdisplay: flex;の処理内容が反映されるようになりました。

意図通りdiv要素が横並びで表示された

てっきりCSSのbody要素とか、bodyタグのdiv要素の記述が間違っているとばかり思っていましたがこういうところが原因になることもあるようです。

なおここからは補足となりますが、metaタグを誤って「mata」と書いたままでも、background-colorなどの設定は問題なく反映されるようです。
混乱しますね・・・。

metaタグを誤ったままbackground-colorを設定

上記のコードをブラウザ表示すると

background-colorの設定は反映されている

ソースコード

本記事で紹介したソースコードの全容は下記となりますので、興味があれば動作確認をしてみてください。

<!DOCTYPE html> 
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Practice</title>
        <style>
            body{
                display: flex;
                flex-wrap: wrap;
            }
            .box{
                width: 100px;
                height: 100px;
                background:  skyblue;
                cursor: pointer;
                transition: 0.8s;
                margin: 0 8px 8px 0;
            }
        </style>
    </head>
    <body>
        <div Class="box" id="target1"></div>
        <div Class="box" id="target2"></div>
        <div Class="box" id="target3"></div>
    </body>
</html>

参考になれば幸いです。

2件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です