レスポンシブレイアウトの柔軟なレイアウトの紹介

レスポンシブレイアウトの実装は、フロントエンドエンジニアリングにおける非常に大きな進歩であり、その非常に柔軟な成形性により、同じウェブサイトが異なる端末デバイスで異なる活力を示すことができます。今日はこの機会を利用して、レスポンシブ レイアウト方法を実装するために一般的に使用されるいくつかの柔軟なレイアウトを共有し、議論したいと思います。

フレキシブルレイアウトは、CSSスタイルのみに依存するレスポンシブレイアウトを実装するための非常に便利な方法であり、Kがレスポンシブレイアウトを実装するために最もよく使用する方法でもあります。特に現在、タオバオやタオバオなどの電子商取引ウェブサイトやモバイルアプリのページは、エラスティックレイアウトを使用して簡単に実装できます。以下は、ページの一部を使用したタオバオのモバイルアプリのコピーです。

ご覧のとおり、特に小さなアイコンを配置したり、領域を頻繁に分割したりする場合、柔軟なレイアウトは非常に便利です。次に、K がフレキシブル レイアウト (display:flex) を確認します。

柔軟なレイアウト flex は、CSS の display:flex; 属性を追加することで、親要素内でその子要素の柔軟なレイアウトを実現できます。 display :flex; このスタイルは、この属性を追加する親コンテナと非世代の子コンテナにのみ適用されます。つまり、親コンテナのdialog:flex属性は、子要素の直接の子要素にはなりません。柔軟なレイアウトを生成します。一般的に言えば、父親は息子をコントロールすることしかできませんが、孫をコントロールすることはできません。次のレイヤーでも引き続きフレキシブル レイアウトを使用したい場合は、対応する子要素に再び display:flex 属性を追加してこれを実現します。

伸縮性のあるレイアウトには、親要素内の子要素の「伸縮性」を調整するために、親要素と子要素に対応する属性があります。

親要素で、主によく使用する柔軟なレイアウトに関連する属性には、flex-direction、flex-wrap、justify-content、align-items、および align-content が含まれます。これらの属性はそれぞれ主軸からのものです。方向、折り返すかどうか、主軸上の項目の配置、交差軸上の項目の配置、および複数の軸上の項目の配置によって、親要素内の項目の柔軟性が制御されます。

子要素で、主に使用する柔軟なレイアウトに関連する属性には、order、flex-grow、flex-shrink、flex-basis、align-self が含まれます。これらの属性は、項目の並べ替えからプロジェクトまで多岐にわたります。拡大率、プロジェクトの縮小率、プロジェクトが占める主軸のスペース、および横軸上の単一プロジェクトの配置によって、プロジェクト自体の柔軟性が決まります。

上記の具体的な属性値と機能については、私のブログ () に記載されています。ここでは、当時私が感じた混乱した点についていくつかお話します。

(1)

主軸と交差軸。 フレキシブル レイアウトでは、主軸と主軸の方向は flex-direction 属性の属性値に依存し、水平方向または垂直方向のいずれかになります。初めてこの概念に触れる方は、CSS で指定されているデフォルト値が「主軸」であるにもかかわらず、「主軸」を「水平方向」のみと同一視しないように注意してください。交差軸は、主軸に垂直な軸を表します。

(2)

ベースライン。 フレキシブル レイアウトでは、「ベースライン」という言葉も記載されていますが、ベースラインとは文字 x の下端を指します。多くの属性値のいわゆるベースライン配置とは、あたかも比較用のテンプレートが常に存在するかのように、行内の小文字の x の下端に沿って配置することを指します。

(3)

複数の交差軸。 複数の交差軸は、flex-wrap 属性がラップに設定された後に発生する可能性のある状況です。つまり、複数の行が親コンテナーに表示され、各行に独自の軸があります。

上記は、レスポンシブ レイアウトの実装における柔軟なレイアウト方法の使用に関する K の概要と洞察です。次回、K はレスポンシブ レイアウトを実装する他のいくつかの方法について引き続き説明します。

以上がレスポンシブレイアウトの柔軟なレイアウトの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。