角材iOS Safariでフレックスボックスが正しく表示されない

Question

4枚のマテリアルデザインカードを並べて表示する機能を追加しようとしています。それはサファリ/イオスを除く他のすべてのブラウザで完璧に動作します。マークアップは以下の通りです。

 <div layout="row" layout-sm="column" layout-xs="column" layout-align="space-around start" layout-align-sm="center stretch" layout-align-xs="center stretch" > 

    <div flex="grow" flex-sm="grow" flex-xs="grow" layout="row" layout-xs="row" layout-align="space-around start" layout-align-xs="center stretch"> 
     <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50" class="selling-points-card" > 
      <div class="selling-points-picture" > 
       <img src="http://placehold.it/50x50"> 
      <span class="selling-points-text">Free Service Included</span>   
      </div> 
     </md-card> 

     <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50" class="selling-points-card" > 
      <div class="selling-points-picture" > 
       <img src="http://placehold.it/50x50"> 
      <span class="selling-points-text">30 Day Money back guarentee</span>   
      </div> 
     </md-card> 
    </div> 

    <div flex="grow" flex-sm="grow" flex-xs="grow" layout="row" layout-xs="row" layout-align="space-around start" layout-align-xs="center stretch"> 
     <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50" class="selling-points-card" > 
      <div class="selling-points-picture" > 
       <img src="http://placehold.it/50x50"> 
      <span class="selling-points-text">90 Day Warranty</span>   
      </div> 
     </md-card> 
     <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50" class="selling-points-card" > 
      <div class="selling-points-picture" > 
       <img src="http://placehold.it/50x50"> 
      <span class="selling-points-text">FreedomPop Certified</span>   
      </div> 
     </md-card> 
    </div> 

    </div> 
**css rules** 
.selling-points-card{ 
position:relative; 
display:inline-block; 
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
.selling-points-picture { 
    display:inline-block; 
    padding:5px; 
}; 
.selling-points-text{ 
    position:absolute; 
    top:40%; left:30%; 
    font-weight:500; 
    font-size:12px; 
    letter-spacing: 0.020em; 
}; 

}

これは、ほとんどのブラウザ上でどのように見えるかです。 https://i.imgur.com/JFWBb5T.png

iPhoneのシミュレータでは、これら4枚のカードが検索結果で切り捨てられます。 https://i.imgur.com/dYyCVGa.png

誰かが私に欠けている可能性があることを知っていますか？ もう一つの質問は、親カードの中央にスパンテキストを配置する正しい方法ですか？

Answer 1

あなたの主な問題は、flexプロパティの他の値を使用してみましたか？

親要素のテキストを中央に配置するには、角度材料のlayout="row"およびlayout-align="center center"プロパティを使用します。 （動作させるには、ブロック要素を使用する必要があります）