scss：固定して並べて表示するボタン

Question

最近、モバイルアプリにボタンを追加しました。ただし、ボタンはモバイル画面のサイズによって表示が異なります。

たとえば、iphone 6+で実行すると、ボタンが次のように並べて表示されますが、iphone 4に表示しているときに、2番目のボタンがその横に表示されるのではなく下に表示されます。

私はそれを反応的にするためにパーセンテージを使用しましたが、明らかに私のお尻では何かが間違っています。

例では、画面のサイズに関係なく、画像に表示されるようにします。

これは私のSASSコード

.IonFooter { 
     button { 
      width: 48%; 
      height: 60px; 
      border-radius: 5px; 
      font-size: 1.3em; 
     } 
} 

である（このCSS Tricks articleをチェックし、あなたのボタンの動作は、おそらく悪名高いdisplay: inline-block;右マージン「バグ」によって引き起こされる事前

Answer 1

にありがとう問題について）。親要素のパディングによっても発生する可能性があります。

とにかく、あなたのボタンが複数の行になるのを避けるためにflexを使うことをお勧めします。

.IonFooter { 
    display: flex; 
    justify-content: space-between; 

    button { 
     flex: 0 0 48%; // Grow: no, shrink: no, width: 48 % 
     height: 60px; 
     border-radius: 5px; 
     font-size: 1.3em; 
    } 
}