モバイルWEBが開発したflexレイアウト原理;一般的な親要素;サブアイテム要素;

7671 ワード

移動端 httml 5

----------------------flexレイアウト----------------
1.1従来のレイアウトとflexレイアウト
1.従来のレイアウト

互換性が良い

レイアウトが煩雑

限界、これ以上移動できない端の良いレイアウト

2.flexフレックスレイアウト

操作が便利で、レイアウトが極めて簡単で、モバイル端末の応用が広範である

PC側ブラウザのサポート状況が悪い

IE 11以降、

はサポートされていない、または一部のみサポートされている
推奨事項:

PC側ページレイアウトであれば、従来のレイアウトです.

モバイル端末または互換性の問題を考慮しないPC端末のページレイアウトであれば、flexフレックスレイアウト

を使用します.
----------------------flexレイアウトの原理-----------------------
2.1レイアウト原理
1.flexはflexible Boxの略で、「フレキシブルレイアウト」を意味し、ボックスモデルに最大の柔軟性を提供し、どのコンテナもflexレイアウトとして指定できます.

親ボックスをflexレイアウトに設定すると、サブ要素のfloat、clear、vertical-alignプロパティが無効になります.

伸縮レイアウト=フレックスレイアウト=伸縮ボックスレイアウト=フレックスボックスレイアウト=flexレイアウト

2.Flexレイアウトを採用した要素は、Flexコンテナ(flex container)と呼ばれ、略称は「コンテナ」である.すべてのサブエレメントが自動的にコンテナメンバーとなり、Flexプロジェクト(flex item)、略称「プロジェクト」と呼ばれます.

divはflex親コンテナです.

divのspanはサブコンテナflexプロジェクト

である.

サブコンテナは、横方向に配列するも縦方向に配列してもよい

.
3.flexレイアウトの原理をまとめる:
親ボックスにflexプロパティを追加することで、サブボックスの位置と配置を制御します.
----------------------flexレイアウトの親の一般的なプロパティ----------------
3.1一般的な親属性
次の6つのプロパティは、親要素に設定されています.

flex-direction:主軸の方向を設定

justify-content:主軸上のサブエレメント配列方式

を設定する

flex-wrap:サブエレメントが改行されているかどうかを設定

align-content:側軸上のサブエレメントの配列方式(複数行)

を設定する

align-items:側軸上のサブエレメント配列方式(単行)

を設定する

flex-flow:flex-directionとflex-wrap

が同時に設定された複合プロパティに相当します.
3.2 flex-directionスピンドルの方向設定
1.主軸と側軸はflexレイアウトにおいて、主軸と側軸の2つの方向に分けられ、同様に行と列、x軸とy軸と呼ぶ

デフォルトの主軸方向はx軸方向、水平右

である.

デフォルト側軸方向はy軸方向、水平下

である.
2.属性値flex-direction属性は主軸の方向(すなわち項目の配列方向)を決定します注意:主軸と側軸は変化するので、flex-directionが誰を主軸に設定するかを見て、残りは側軸です.私たちのサブエレメントは主軸に沿って配列されています

row(デフォルトは左から右)

row-reverse(右から左)

column(上から下、これはy軸を主軸とする)

column-reverse(下から上へ)

3.3 justify-content主軸上のサブエレメント配列の設定
1.justify-contentプロパティは、主軸上のアイテムの位置合わせを定義します.
注意:このプロパティを使用する前に、主軸がどれであるかを必ず決定してください.
2.属性値

flex-start(デフォルトは頭部から、主軸がx軸の場合は左から右)

flex-end(末尾から並ぶ)

center(主軸が中央に位置する(主軸がx軸であれば水平に中央に位置する))

space-around(余剰空間を分割)

space-between(両側を貼り付けてから残りの空間を分割する(重要))

3.4 flex-wrapサブエレメントを改行するかどうかを設定する

のデフォルトでは、プロジェクトはすべて1本の線(軸線とも呼ばれる)に並んでいます.flex-wrapプロパティ定義、flexレイアウトではデフォルトで改行されません.(nowrapデフォルトは改行しません)

wrap(改行)

3.5 align-items側軸上のサブエレメントの配置方法(単行)を設定する
1.この属性は、サイド軸(デフォルトはy軸)におけるサブアイテムの配列を制御するためのものです.サブアイテムがシングル(シングル)の場合に使用します.
2.属性値

flex-start(デフォルトは上から下)

flex-end(下から上へ)

center(垂直方向中央)

stretch(ストレッチ)

3.6 align-content設定側軸上のサブエレメントの配列方法(複数行)
1.サイド軸上でのサブアイテムの配置方法を設定し、サブアイテムが改行された場合(複数行)にのみ使用でき、単行では効果がありません.
2.属性値

flex-start(デフォルトは上から下)

flex-end(下から上へ)

center(垂直方向中央)

space-around(サブアイテムが側軸で余剰空間を分割する)

space-between(サブアイテムは側軸で先に両端に分布し、残りの空間を分割する)

stretch(子要素の高さを親要素の高さに均等に設定)

3.7 align-contentとalign-itemsの違い

align-itemsは、上揃え、下揃え、中央揃え、および引張り

のみ、単行の場合に適用されます.

align-contentは、改行(複数行)に適応している場合(単行では無効)、上揃え、下揃え、中央揃え、引張り、平均分配の残りの空間などの属性値を設定できます.

まとめは単行検索align-items多行検索align-content

3.8 flex-flow
flex-flowプロパティはflex-directionとflex-wrapプロパティの複合プロパティです

flex-flow:row wrap; (x軸が主軸で複数行)

----------------------flexレイアウトサブアイテムの一般的なプロパティ---------------

flexサブプロジェクトが占める部数

align-self制御子項自身の側軸における配列方式

order属性定義サブアイテムの並び順(前後順)

4.1 flex属性
flexプロパティは、サブプロジェクトが残りのスペースを割り当てることを定義し、flexで何部を占めるかを表します.

	.item {
     
		flex: number; /* default 0 */
		flex: 1;
	}

4.2 align-self制御子項目自身の側軸上の配列方式
1.align-selfプロパティを使用すると、align-itemsプロパティを上書きできるように、単一のアイテムに他のアイテムとは異なる位置合わせが可能になります.
2.デフォルト値はautoです.親要素を継承するalign-items属性を表します.親要素がない場合はstretchと同等です(属性値と親要素の差は多くありません)

	span:nth-child(2) {
     
		/*               */
		align-self: flex-end;
	}

4.3 order属性定義項目の並び順

order:の値が小さいほど、配列が前になり、デフォルトは0(z-indexとは逆)

です.
----------------------------------------------------------------

テクノロジーオプション:モバイルページを個別に作成するテクノロジー:レイアウトflexレイアウト