search

qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
149 stars 6 forks source link

ボタンとフォームの等分指定の修正 #63

Closed qrac closed 7 years ago

qrac commented 7 years ago

50 の続き。

iOSで折り返すようになったが、等分の役割を果たさなくなった。内容量に応じた残余白の分配になってしまっている。

qrac commented 7 years ago

.is-mobile-0などで等分しつつ広がる要素がiOSでのみ折り返さずにはみ出ていたので

img_1761

flex: 1 0 0%;をflex: 1 0 auto;に変更することで解決したが、

img_1762

中に含まれる文字数が同じ場合は等分となるが、そうでなければ中身に応じたサイズになってしまう。

qrac commented 7 years ago
flex: 1 0 auto; flex: 1 0 0%;
musubii-17072801 musubii-17072802
qrac commented 7 years ago

等分は主にアプリのデザインで使う。必要以上にボタンなどを横並びにはしないと思われるため、flex: 1 0 0%に戻す。

ただし、強引にデザインした場合にiOSで崩れる点は把握しておく。