ディスプレイ：フレックス;

Question

このコードは、コンピュータでは正常に動作しますが、は、iPad用Chrome 47とiPad用Safari（横向きの幅1024px）の両方でdisplay: flexを完全にレンダリングできません。

flexは、長い間、Chromeでうまくサポートされているはずです。

* { margin: 0; padding: 0; } 
 
#header { height: 60px; display: -webkit-flex; display: flex; } 
 
#topleft { flex: 0 0 155px; height: 100%; background-color: green; } 
 
#topmid { flex: 0 0 40%; height: 100%; background-color: blue; } 
 
#topright { flex: 1; background-color: yellow; }

<div id="header"> 
 
    <div id="topleft">Topleft</div> 
 
    <div id="topmid">Topmid</div> 
 
    <div id="topright">Topright</div> 
 
</div>

何が問題になっています ？

Answer 1

iPadがiOS 9を実行していない場合は、-webkit-flex：0 0 155pxを追加する必要があります。 #topleftに、-webkit-flex：0 0 40％; #topmidに、-webkit-flex：1に設定します。 〜へ#topright。

表示の組み込みに基づいて前提を設定します。-webkit-flex;

だから、あなたは新しいCSSは次のようになりますしている。また

* { margin: 0; padding: 0; } 
#header { height: 60px; display: -webkit-flex; display: flex; } 
#topleft { -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; } 
#topmid { -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; } 
#topright { -webkit-flex: 1; flex: 1; background-color: yellow; } 

、iPadのChromeは、まだそれだけのWebViewだ... Safariのエンジンを使用しているので、私たちは、すべてのアップを得ることはありません今日までAndroid搭載端末でChromeの良さを実感しています。