フレックスボックス：Safariで要素を垂直方向に分配する

Question

モバイルのポートレート表示で3つのアイテムを配布する必要があります。 flexを使用し、サファリを除く他のすべてのブラウザで動作します。だからそれはiphoneで動作していません。

私はalign-content: space-between;とflex-flow: row wrap;を一緒に使って整列を得ました。 Safariで正しく動作させるために使用する正しいプロパティは何ですか？

*{ 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, body{ 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrap{ 
 
    display: -webkit-box;display: -ms-flexbox;display: flex; 
 
    -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; 
 
    -ms-flex-line-pack: justify;align-content: space-between; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    height: 100%; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 

 
} 
 
div[class*="col"]{ 
 
    height: 50px; 
 
    width: 100%; 
 
    border: 1px solid green; 
 
}

<div class="wrap"> 
 
    <div class="col1"> 
 

 
    </div> 
 
    <div class="col1"> 
 

 
    </div> 
 
    <div class="col1"> 
 

 
    </div> 
 
</div>

-> Here is the fiddle

Answer 1

あなたのコードは古いSafariのバージョンのために必要な-webkit-プレフィックスが欠落しています。

display: -webkit-flex; 
display: flex; 

-webkit-flex-direction: column; 
flex-direction: column; 

-webkit-align-content: space-between; 
align-content: space-between; 

-webkit-flex-flow: row wrap; 
flex-flow: row wrap; 

参考文献：

• http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
• http://caniuse.com/#search=flexbox（ "すべて表示" をクリックしてください）
• https://stackoverflow.com/a/35137869/3597276