CSS display:flexの解除方法【カンタン!たった1行!】

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

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

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

そもそもdisplay:flexとは↓

【flex解除】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」になるので、横並びから縦並びに変わります。

ただし、htmlタグによってはdisplay:blockがふさわしくない場合があります。下記記事よりdisplayの初期値をご確認ください。

【注意】display:initialはinlineになる

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

ただし、displayにおいてinitialを指定するとhtmlタグに関わらず すべてinline要素になります。

下記は「div,a,span」に「display: flex」を指定したあとに「display:initial」を指定した例です。

aタグ span

<style>
.example{
    display: flex;
    /*コレ*/display: initial;
    border: 1px solid #999;
    width: 100px;
}
</style>
<div class="example">div</div>
<a href="#" class="example">aタグ</a>
<span class="example">span</span>

すべて横に並んでおり、かつwidthが効いていないことからinline要素であることがわかります。

displayにおいてinitialは使わない方がいいでしょう。

また、initialはdisplayに限らず どのCSSプロパティにも使えますがIEでは使えません。

下記記事で詳しく解説します。

【flex解除】メディアクエリで条件指定

これは解除・初期化というより、特定の状態の時だけCSSを指定し、それ以外のときは通常のCSSでいる、というものです。

<style>
@media(min-width:801px){
  div{
  display:flex;
  }
}
</style>

上記の場合はブラウザの幅が801px以上の時、つまりパソコン版のとき、divをdisplay:flexにするというものです。

そしてブラウザの幅が800px以下のときはこのCSSが無視され通常の状態になります。

【子要素を解除】<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でお困りなら下記記事もご参照ください。

解除しなくていいから縦並びにしたいというときはこちらも参考にしてください。

justify-contentの解除

flexとセットでよく使われるjustify-contentの解除についても見ていきましょう。

justify-content:startを指定

justify-contentの初期値はstart、つまり左寄せです。

justify-content:startで上書きすれば解除できます。

justify-content:initialを指定

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

IEでは使えませんので、「start」の指定が無難でしょう。

display:blockなどにする

justify-contentはflexになっている要素に指定しますが、flex以外の要素になっていると効きません。

要素をdisplay:blockなどにすると勝手にjustify-contentも効かなくなりますので解除も不要です。

align-itemsの解除

flexとセットでよく使われるalign-itemsの解除についても見ていきましょう。

align-items:normalを指定

align-itemsの初期値はnormalです。stretchと同じ効果です。

align-items:normalで上書きすれば解除できます。

align-items:initialを指定

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

IEでは使えませんので、「normal」の指定が無難でしょう。

display:blockなどにする

align-itemsはflexになっている要素に指定しますが、flex以外の要素になっていると効きません。

要素をdisplay:blockなどにすると勝手にalign-itemsも効かなくなりますので解除も不要です。

flex-wrapの解除

flexとセットでよく使われるflex-wrapの解除についても見ていきましょう。

flex-wrap:nowrapを指定

flex-wrapの初期値はnowrap、折り返さないようにできます。

flex-wrap:nowrapで上書きすれば解除できます。

flex-wrap:initialを指定

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

IEでは使えませんので、「nowrap」の指定が無難でしょう。

display:blockなどにする

flex-wrapはflexになっている要素に指定しますが、flex以外の要素になっていると効きません。

要素をdisplay:blockなどにすると勝手にflex-wrapも効かなくなりますので解除も不要です。

まとめ

display:flexの解除方法

• display:blockを指定
• メディアクエリで条件指定

display:flex内の子要素を解除させる方法

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

justify-contentの解除方法

justify-content:startを指定

align-itemsの解除

align-items:normalを指定

flex-wrapの解除

flex-wrap:nowrapを指定

以上、display:flexの解除方法でした。