css flexスマフォ対応

display flex属性

/*-----display:flex用--------*/
    display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
/*-----flex-wrap: wrap用--------*/
    -ms-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    flex-wrap: wrap;
/*----- justify-content:space-between用--------*/
    -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack:justify;/*--- IE10 ---*/
    -webkit-justify-content:space-between;/*--- safari(PC)用 ---*/
    justify-content:space-between;

ios7,android2,android4

このようにしてみたが、ネックはflex-wrapで、アンドロイド標準ブラウザだけ効かなかった。
つまり横1列に並んでしまう状態。

とりあえず、display:tableとfloatでしのいでおく。

コメント