いくつかのiPadでCSSのフレックスレイアウトが動作しない

Question

私はipadでflexに問題があります。 3つの等間隔のボックスが必要です。私のipadと様々なブラウザ（デスクトップ上のサファリ）でうまく動作します。ただし、いくつかのiPadsは、ボックスにはスペースがないことを示しており、すべて左に置かれています。私はこれを再現することはできません。

は、ここで私はこのCSSを持っているHTML

<aside id="home-page-postcards" class="home-page-postcards" role="complementary"> 
    <div class="postcard-wrapper"> 
    <div class="postcard">...content...</div> 
    <div class="postcard">...content...</div> 
    <div class="postcard">...content...</div> 
    </div> 
</aside> 

です。あなたがjustify-content: space-betweenのために2009 -webkit-box構文が欠落しているためである

.home-page-postcards { 
    background:#fff; 
    width:100%; 
    padding-top:60px; 
    padding-top:35px; 
    padding-bottom:40px; 
} 


.postcard-wrapper { 
     display: -webkit-box;  
     display: -moz-box;   
     display: -ms-flexbox;  
     display: -webkit-flex;  
     display: flex;    

     width:1170px; 
     margin:0 auto; 

     -webkit-flex-flow: row nowrap; 
     flex-flow:row nowrap; 

     -webkit-justify-content: space-between; 
     justify-content: space-between; 
     } 

.postcard { 
    width:31.2%; 
    font-family: 'Belleza', sans-serif; 
    font-size:20px; 
    line-height:1.3; 
} 

Answer 1

。 Safariで古いiPads < 6.1必要-webkit-box-pack: justify;。

flexbox back-compatの場合、すべてのブラウザで接頭辞-moz-と-ms-を含むデフォルト以外のすべてのプロパティに2つの構文を追加する必要があります。

あなたのラッパーは次のようになります。

display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: justify; 
    -moz-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 

は、あなたの完全なクロスブラウザの構文のヘルプのために、このdemo and flexbox generatorを参照してください。

PS：このツールは完全なプロパティセットを生成することに注意してください。すでに「フレックスボックス」のデフォルト設定がある場合は、必要ないものもあります。この場合、rowまたはnowrapは必要ありません。すでにフレックスのデフォルトです。