マンガでわかるホームページ作成

【カンタン!たった1行!】display:flexを解除する方法

こんにちは。テイクです。ホームページを作り続けて9年になります。

display:flexを使うと横並べにしたり、中央寄せにしたり、順番を入れ替えたりなどレイアウトに関する変更ができます。

ただし、パソコン版スマホ版で切り替えるためにdisplay:flexを解除したいときがあります。

そんなときのdisplay:flexを解除する方法を説明します。

そもそもdisplay:flexとは↓

1.display:blockを指定する

dispaly:flexを解除つまり効かなくするためにdisplay:blockで上書きする方法があります。

<style>
div.flex{
    display:flex;
}
div.flex>div{
    border:1px solid #999;
}
@media(max-width:750px){
    div.flex{
        display:block;/*コレ*/
    }
}
</style>
    
<div class="flex">
    <div>左テキスト</div>
    <div>右テキスト</div>
</div>

↓横幅を狭くすると「display:flex」が「display:block」になるので、横並びから縦並びに変わります。

左テキスト
右テキスト

CSSの優先順は下記の記事を参考にしてください。

2.display:initialを使う(IEでは効かない)

display:initialでデフォルトに戻す、つまり解除することができます。

IEでは使えませんが、IEの利用率は下がっていっていますし、Microsoft 365 アプリの IE11 のサポートが2021年8月17日にいよいよ終わるようです。

3.<div>などで囲い、孫要素にする

display:flexを使うと上下左右中央寄せにできます。その一方で中の要素が勝手に横並べになってしまいます。

上下左右中央寄せは維持しつつ横並べはしたくない(解除したい)ときはその要素をdivなどで囲ってしまいましょう。

失敗例

<style>
.center,.center>div{
    border: 1px solid #999;
    background: #e6e6e6;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background: #c2e1ff;
}
</style>
<div class="center">
    <div>上</div>
    <div>中</div>
    <div>下</div>
</div>

上下左右中央寄せはできていますが要素が横並びになってしまっています。これをdivで囲って縦並びにしましょう。

成功例

<style>
.center,.center>div{
    border: 1px solid #999;
    background: #e6e6e6;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background: #c2e1ff;
}
</style>
<div class="center">
    <div>/*コレ*/
        <div>上</div>
        <div>中</div>
        <div>下</div>
    </div>/*コレ*/
</div>

CSSは何も変えていません。divを追加しただけです。

このとき上下中央寄せされているのは追加したdivタグです。

display:flexの影響を受けるのはその子要素だけです。

その孫のdivタグはdisplay:flexの影響を受けないため縦並びになりました。

 

その他display:flexでお困りなら下記記事もご参照ください。

まとめ

1.display:blockを指定する

display:flexを打ち消しましょう。

2.display:initialを使う

デフォルトに戻すことができます。IEでは効きませんが、IEサポート終了までもう少しのしんぼうです。

3.<div>などで囲い、孫要素にする

display:flexの影響を受けるのはその子要素だけです。

 

以上、display:flexを解除する方法でした。

関連記事