android4系ブラウザでのflex wrapの対処方法

CSSでの要素を横並びにするのに便利なflex。最近のブラウザならほぼ対応していることもあり、floatの処理を書かなくてもよくなってきました。ありがたいことです。ただ、それでも一部ブラウザに対応させるために-webkit-処理などは必要だったりします。それはまだいいんですが、flexに合わせて、折り返し処理などが一部非対応だったりするandoroidブラウザなどがあったりします。今回は実際にコーディング上で処理した方法を備忘録も兼ねてご紹介したいと思います。

要素を並びにするflex;

ブラウザが対応しているという前提で、要素を並べて表示したいなって場合には

display: -webkit-flex;
display: flex;

と書いてあげれば、いい感じに横並び処理をしてくれたりします。しかし、andoroid4系の標準ブラウザによっては、flexも-webkit-flexも効かなかったりします。その場合には

display: -webkit-box;
display: -webkit-flex;
display: flex;

のような記述をしておけば、ひとまず横並び処理にはなってくれるはず。

要素を折り返すflex-wrap: wrap;

横並びにしたい要素のサイズを変えずに、画面に表示しきれない場合は折り返すという処理は

display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

としてあげれば、だいたいのブラウザでは折り返しの処理をしてくれます。ところが-webkit-boxについては、このwrapのプロパティが存在しなかったりします。なので、上のようなCSSを書いていたとしても平然と横並びに表示されてしまいます。これでは狙ったとおりのコーディングができなくて困ります。

縦一列でいいなら、display: block;にしてしまおう

モバイル端末での表示が縦一列にしてしまってもいいなら、メディアクエリを使ってレスポンシブ対応と同じ処理をしてしまう手があります。

@media screen and (max-width: 768px) {
    該当する要素 {
        display: block;
    }
}

こうすることで、横並びのflexや-webkit-boxを解除。要素を縦一列に表示できます。

数列で折り返して表示させたい場合はhtml部分もいじる

処理としてはいい部類ではないと思うんですが、表示上整える方法としてはhtmlも修正して表示非表示をうまく使う方法もあります。例えば、3列の要素を2列折り返しにしたい場合は

【html】
<div id="list">
    <div class="card red"></div>
    <div class="card green"></div>
    <div class="card blue"></div>
</div>

↓

<div id="list">
    <div class="card red"></div>
    <div class="card green"></div>
    <span class="pclist"><div class="card blue"></div></span>
</div>
<div id="splist">
    <div class="card blue"></div>
</div>

のようにして、PC表示などではsplistを非表示にしておく。スマートフォンでの表示では逆にpclistを非表示にし、splistを表示にする。これによって2列は常にflexによって横並び表示になっており、最後のひとつはそれぞれのデバイスによって表示位置が変わったようにみせることができます。cssで書くと以下のような感じになるかと思います。

【css】
#list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
#splist {
    display: none;
}
@media screen and (max-width: 768px) {
    .pclist {
        display: none;
    }
    #splist {
        display: block;
    }
}