プログラミング備忘録

忘れない様にメモ

*

css flexスマフォ対応

      2015/08/31

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でしのいでおく。

この記事は役に立ちましたか? はい いいえ 0人中0人が役に立ったと言っています。

 - CSS