CSS3_html/css_WEB-ITnose のより柔軟なレイアウト方法

flex は、内部要素の幅、高さ、または残りのスペースを適切に制御して、さまざまな表示デバイスやさまざまな画面サイズに適応することができます。

フレックス レイアウトは通常のレイアウトとはまったく異なりますが、大規模で複雑なプロジェクトの場合、柔軟性に欠けるという点で、方向を変更したり、サイズを調整したりすることが困難になります。 flex は小規模レイアウトのアプリケーションのコンポーネントとして最適であり、グリッド レイアウトは大規模レイアウトに適しています。

flex のモジュール全体には、多くの要素と一連の属性が含まれます。フレックスラベルとして設定されているものをフレックスコンテナと呼び、このコンテナ内の子ノード要素をフレックスアイテムと呼びます

通常のレイアウトがブロックおよびインラインレイアウトに基づいている場合、フレックスはフレックスと呼ばれます。フロー方向レイアウト

フレックス レイアウトの関連するアイデアを説明するために、次の図を見てみましょう

まず、ボックス内に 2 つの要素 1 と 2 があります。現時点ではまだ flex を定義していますが、ボックス内の要素を定義する他の用語はありません

次に、2 つの赤い方向線を見てください。

主軸: 水平方向。

交差軸: 縦方向は、交差軸と呼ばれる主軸を基準としています

1,2 2 つのサブボックス:

ここではフレックス アイテムと呼ばれます。青い部分を見てください メインスタート、メインエンド、クロススタート、クロスエンド レイアウト(メイン軸、クロス軸)方向の開始位置と終了位置です

メインスタート: 主軸レイアウト開始位置

メインエンド:主軸レイアウトの終了位置

クロススタート: クロス軸レイアウトの開始位置

クロスエンド: クロス軸レイアウト終了位置

メインサイズ: 主軸レイアウト上のフレックス項目のサイズ

クロスサイズ: のサイズクロス軸レイアウト上のフレックス項目

コンテナとフレックス項目の主なプロパティとそれらの役割を見てみましょう

まず、コンテナとフレックス項目の関連するプロパティと関数を理解しましょう下の図では、フレックス コンテナを定義します。 play:flex /*inline-flex*/

属性値に応じてコンテナをフレックス レイアウトとして定義します。フレックスはブロック、インラインです。 flex はインラインです

flex-direction

主軸と方向を確立し、コンテナ内のフレックス項目のレイアウト位置を定義します。 フレックス ボックスは一方向のレイアウト モードです。つまり、flex アイテムは水平方向または垂直方向に配置されます。はデフォルト値です。左から右へのレイアウト

row-reverse: 右から左へのレイアウト

column: 上から下へ

column-reverse: 下から上へ

flex-wrap

画像より デフォルトでは flex を使用します もちろん、必要に応じてプロパティを変更して設定することもできます。

flex-wrap:nowrap | Wrap-reverse;

nowrap: デフォルト値、左から右へ
wrap: 複数行モード (行折り返し)右へ

wrap-reverse: 複数行 (行折り返し) モード、右から左へ

flex-flow: <'flex-direction'<'flex- Wrap'>

この属性は、flex-direction と flex-wrap 書き込みメソッドを組み合わせたもので、属性のデフォルト値は row nowrap

justify-content

フレックス項目間の配置を制御します。 -between | space-around;

flext-start: デフォルト値、左揃え

flex-end: 右揃え

center : 中央揃え

space-between: 両端揃え

space-around: フレックス項目両側はコンテナの端から同じ距離にありますが、各項目間の距離は端の距離の 2 倍であり、各項目間の距離は等しいです

align-items

justify-content のレイアウトを基準にして、フレックス項目の配置を設定します

。

align-items: flex-start | center | stretch;

flex-start: 交差軸の終了位置を揃えます

center: 十字を軸の中央位置に揃えます
baseline: ベースラインの揃え
stretch: デフォルト値、コンテナ全体を埋めます (ただし、min-width/max-width に従います)

align-content

交差軸の配置と比較すると、主軸の配置に似ています。コンテナ内の 1 つの軸に項目のみがある場合、属性には何もありません。

align-content : flex-end | space-around |

flex-start: 交差軸の開始位置に基づいて整列します。

flex-end: 交差軸の終了位置に基づいて整列します
center: 交差軸の中央に基づいて整列します

space-between: 交差軸の両端を整列します

space-around: 各項目が同じ位置にあります交差軸上の距離
stretch: デフォルト値、アイテムはコンテナーの交差軸を占めます

メインコンテナーのプロパティを理解した後、引き続きプロパティを見ていきますフレックス項目の関数と

order

order: ;

デフォルトでは、フレックス項目は順番にレイアウトされます. order は、コンテナ内の flex アイテムの順序を制御するために使用されます。比率 各項目が占める必要があるスペースの割合を指定します。すべての項目の flex-grow 値が 1 の場合、残りのスペースがあれば均等に分割されます。 1 つの項目の flex-grow 値が 2 で、他のすべての項目の値が 1 である場合、値 2 の項目は他の項目の 2 倍の残りスペースを占有します。

flex-grow:; /* デフォルト 0 */

デフォルト値は 0 です。値が 0 の場合、各項目が占めるスペースは変更されません (元の値)。 size) .属性値、負の数値は無効です。

flex-shrink

flex-grow と同様に、属性値、負の数値は無効です。

flex-shrink:; /* デフォルト 1 */

flex-basis

残りのスペースの値。 30%、5rem などの長さ、またはキーワードを指定できます。値は auto で、「幅または高さの値 auto」のようになります。

flex-basis: auto; /* デフォルトの auto */

0 に設定すると、値が auto の場合、結合された書き込み方法に基づいて追加のスペースが割り当てられます。 2 番目と 3 番目のパラメータはオプションの値です: 0 1 auto

flex: none [ <'flex-grow'<'flex-shrink' >? || <'flex-basis'>

コンテナ内の flex 項目の配置位置を個別に設定することをお勧めします。 align-self: auto | flex-start | flex-end center | ストレッチ;

ヒント: float、clear、vertical -align これらの属性は flex アイテムのレイアウトには影響しません

Wu Tongwei のブログ、WeChat 公開アカウントに属します: bianchengderen のオリジナル記事、転載する場合は出典と対応するリンクを示してください: http://www.wutongwei.com /front/infor_showone.tweb?id=145 、どなたでも拡散していただけます。シェアする。