flexを使ったcssでaタグ内のclassがandroidで反映されない

Question

実現したいことは下記の質問と全く同じ内容です。
【css】display:flexで横並びにしたboxがwrapで折り返した際に上下の隙間が空くようにしたい

その質問を参考に、margin-bottomを追加したところ、PCのブラウザとiphoneでは問題なく上下に隙間が開きました。

しかし、androidで見ると隙間ができません。

[html]

<div class="btn-menu"> <a href="item1.php" class="btn">item1</a> <a href="item2.php" class="btn">item2</a> <a href="item3.php" class="btn">item3</a> <a href="item4.php" class="btn">item4</a> <a href="item5.php" class="btn">item5</a> <a href="item6.php" class="btn">item6</a> </div>

[css]

.btn-menu {
display: inline-flex;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.btn-menu .btn {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin-bottom: 5px;
}

どこが間違っているのでしょうか？

Answer 1

btnクラスのCSS記述がおかしいのではないでしょうか？

display: flex;
display: -webkit-flex: 1 0 auto;
display: -ms-flex: 1 0 auto;
flex: 1 0 auto;
margin-bottom: 5px;

Comments

[minoru23]

ありがとうございました！参考になりました！