なぜイオンはグリッド `.col`` display：block`と `width：100％`プロパティを設定しますか？

Question

イオンの_grid.scssソースコードを読むと

.col { 
    @include flex(1); 
    display: block; 
    padding: ($grid-padding-width/2); 
    width: 100%; 
} 

私はdisplay:block;とwidth: 100%;もうまく機能削除： 私はこのスタイルを見つけました。 イオンがなぜこれらの特性をここに入れるのですか？

Answer 1

理由

他のクラスやスタイルがあなたの状況をオーバーライドする可能性はなく、すべての状況があります。そのため、ユースケースは正常に動作しますが、すべてのユースケースが正常に動作するわけではありません。

この場合、実際にはflexルールのバックアップです。 Flexboxは古いブラウザではサポートされておらず、display:block;とwidth:100%;がこれらのブラウザの代替ルールとして使用されています。

---

、画面の右側にionic grid

に

移動を再現し、あなたはcol要素を持つ携帯電話の例を持っています。

はflexクラスを無効にしたものcol要素

のいずれかを調べ。これらは唯一のアクティブなクラスです：

display: block; 
padding: 5px; 
width: 100%; 

あなたは何も変わらないことがわかります。