モバイル Web サイトの最初の開発を記念したフレックス レイアウトの使用_html/css_WEB-ITnose

私は PC ウェブサイトの開発に重点を置いていて、モバイル ウェブサイトに触れたことはありませんでしたが、今日、偶然にも会社のビジネス ニーズでもあるため、以前に flex のレイアウトを学習しました。実践に移す。依然として多くの問題が発生していますが、主にフレックス レイアウトに関する問題が挙げられます。

フレックス レイアウトは CSS3 のコンテンツであり、フレキシブル レイアウトとも呼ばれる新しいレイアウト方法であり、主に全体のレイアウトとして inline-bolck と float を置き換えます。もちろん、これら 2 つのレイアウトには依然として独自の利点があり、その存在には理由があります。

歴史的なプロセスは box-->flexbox --> flex

Google でデバッグされているため、携帯電話のすべてのブラウザが html5+css3 をサポートしていると考えるのが自然です。バージョン

1 ディスプレイ: flex; 2 justify-content: space-between; 3 align-items:center;

お待ちください

http://www.responsinator.com などのテスト Web サイトでのパフォーマンスに非常に満足しています/

実際のデバイスでテストしたところ、Apple デバイスと Android デバイスの両方のレイアウトが完全にめちゃくちゃになりました。その後、ブラウザは標準化されておらず、すべてプライベート属性であるため、ブラウザはすべて -webkit-kernel ベースであり、Apple で実行するにはプレフィックスを追加する必要があることを知ったので、次のような記述方法を思いつきました

rreee

まあ、Apple では 4 を使用しましたが、パフォーマンスはかなり良いです。画面が少し小さいことを除けば、まだ許容範囲です。

Android で入手してください (笑)、基本的に会社の Android スマートフォンはすべて一掃され、レイアウトはまったく変更されていません。テスト機は最近のものが多く、せいぜい1～2年前のマシンです。後で、flexレイアウトが全く認識されず、box(つまり一昔前の構文)を使うしか解決できないことが分かり、以下のような書き方になりました

display: -webkit-flex; display: flex;-webkit-justify-content:space-between; justify-content: space-between; -webkit-align-items:center;align-items:center;

Note: This isレスの書き方（習ってないけど） とても良かったです

しかし、途中で少し残念な点があります。 新しいフレックスには「自動ワードラップを超えて」という機能もあります。ボックスを使用できますが、すべてのブラウザがこれをサポートしているわけではないため、代わりに他のレイアウト (前述のフロートなど) を選択することしかできません。

概要:

flex のレイアウトは基本的にカーネルに基づいています。中国のほとんどの PC は IE7 ～ 8 と互換性があり、モバイル端末での使用を考慮できるため、PC には推奨されません。すべて、Android と Apple だけです)。全体として、このレイアウトは非常に優れており、今後は html5+css3 が主流になるはずです。

より良い解決策がある場合は、お気軽に教えてください、ありがとう。

参考情報:

http://www.w3cplus.com/css3/using-flexbox.html (旧ボックス)

http://www.ruanyifeng.com/blog/ 2015/ 07/flex-grammar.html (新しいフレックス)