CSS-Flexフレキシブルレイアウトノート

記事はYoudaoCloud Notesからcsdnブログに転送されます。画像の損失の問題がある場合は、元のテキストを読むことができます。

記事のディレクトリ

私が最初にCSSレイアウトに触れたとき、レイアウトの表示 + 位置 + フロートプロパティに依存することがよくありましたが、これは使用プロセスで非常に不便でした。たとえば、一部のフローレイアウト、加重レイアウトなど、最も一般的なのは要素のセンタリングの問題であり、これは多くの初心者を悩ませていると考えられています。これらの問題に対して、従来の複雑なレイアウトを置き換えるための一度限りの方法はありますか？もちろんあります 。Flexフレキシブルレイアウト は、ほとんどの従来のレイアウトをうまく置き換えることができます。

基本概念

エラスティックレイアウトを定義し、displayプロパティをflexに設定します

display : flex

フレックスレイアウトには、主軸と交差軸（横軸とも呼ばれます）の2つの重要な軸があります。主軸の位置によってレイアウトの配置方向（水平および垂直）が決まり、レイアウト方向が決まります。属性によるflex-direction。デフォルト値rowは水平方向です。以下は水平方向の概略図です。

ここに画像の説明を挿入します

フレキシブルコンテナ：displayプロパティでフレックスするように設定されたコンテナはフレキシブルコンテナです
柔軟なアイテム：コンテナ内の各アイテムの子要素
主軸：主軸が依存flex-directionする属性値。属性値rowが主軸の場合は水平方向、属性値columnが主軸の場合は垂直方向。
交差軸（横軸）：横軸は主軸に垂直です
主軸サイズと側軸サイズ：サブ要素アイテムの幅と高さを決定します。主軸に対応するものを主軸サイズと呼び、側軸に対応するものを側軸サイズと呼びます。

以下では、わかりやすくするために、フレキシブルアイテムを子要素と呼び、フレキシブルコンテナを親要素とします。

使用法の観点から、親要素の属性と子要素の属性の2つの部分に分けることができます。

親要素の属性：

flex-direction：主軸の方向、つまりサブ要素の配置方向を制御します。
flex-wrap：現在の行の残りのスペースが不十分である場合、つまりすべての子要素を収容できない場合に、子要素を折り返すかどうかを制御します。
フレックスフロー：オプションの属性。
justify-content：主軸方向の子要素の配置とスペース割り当てを制御します。
align-items：行の単位で、横軸（交差軸）方向の子要素の配置を制御します。
align-content：横軸方向の各行のサブ要素の配置とスペース割り当てを制御します。有効にするには、flex-wrapプロパティと連携する必要があります。前提には複数の行が必要であり、その機能は類似しています。 justify-contentプロパティに。

子要素の属性：

order：子要素の並べ替えを制御します。値が小さいほど、行が高くなります。
flex-grow：Androidのweight属性と同様に、デフォルト値は0であり、残りのスペースは割り当てられません。
flex-shrink：親要素のコンテナスペースが不十分な場合、子要素は現在のスペースサイズに合わせて縮小され、デフォルト値は1であり、スペースが不十分な場合に割り当てられます。
flex-basis：特定の値を設定すると、残りのスペースが十分であるかどうかに関係なく、子要素のサイズは変更されません。デフォルト値はautoで、これは自動を意味します。幅が設定されている場合、占有されるスペースは幅であり、設定されていない場合は、コンテンツの幅に基づきます。
フレックス：flex-grow、flex-shrink、flex-basisの省略形
align-self：横軸方向の単一のサブ要素の配置を制御します。これは、align-itemsがすべてのサブ要素を制御することを除いて、align-itemsと同じです。

次の例で修正されたコード

HTML

<div class="container">
	<div class="item" style="background-color: #56FF85;">1-广州</div>
	<div class="item" style="background-color: #ADFF2F;">2-深圳</div>
	<div class="item" style="background-color: #DD56F9;">3-上海</div>
	<div class="item" style="background-color: #99882F;">4-北京</div>	
</div>

CSS

.container{
	width: 400px;
	height: 200px;
	background-color: #556688;
	display: flex;
	
}
			
.container .item{
	display: flex;
	//这里主要是设置子元素的文本居中
	align-items: center;
	justify-content: center;
				
}

親要素に作用する属性

フレックス方向

次の値を使用して、水平または垂直などのサブ要素のレイアウト方向を制御するために使用されます。

行（デフォルト値）：主軸は水平で、左から右に配置されます。
行反転：主軸は水平で、右から左に配置されます。
列：主軸は垂直方向で、上から下に配置されます。
columu-reverse：主軸は垂直で、下から上に配置されます。

行の効果（デフォルト値）：

ここに画像の説明を挿入します

注1は4つの子要素、注2は親要素です

列の効果：

ここに画像の説明を挿入します

他の2つの行反転と列反転は示されません

上記の効果は、親要素にflex-directionを設定するだけで、子要素は属性を設定しません。

.container{
				width: 400px;
				height: 200px;
				background-color: #556688;
				display: flex;
				flex-direction: column;
				
}

フレックスラップ

サブエレメントを主軸方向に折り返すかどうかを制御するために使用します。簡単に言うと、すべてのサブエレメントを1行で表示するか複数行で表示するかを設定します。プロパティ値：

nowrap：デフォルト値、改行なし
ラップ：残りのスペースが不足している場合、ラップします
wrap-reverse：残りのスペースが不足している場合、それは折り返され、最初の行は逆の順序で一番下に移動します。

HTMLにいくつかの項目を追加します。

<div class="container">
			<div class="item" style="background-color: #56FF85;">1-广州</div>
			<div class="item" style="background-color: #ADFF2F;">2-深圳</div>
			<div class="item" style="background-color: #DD56F9;">3-上海</div>
			<div class="item" style="background-color: #99882F;">4-北京</div>
			<div class="item" style="background-color: #56FF85;">5-厦门</div>
			<div class="item" style="background-color: #ADFF2F;">6-武汉</div>
			<div class="item" style="background-color: #DD56F9;">7-天津</div>
			<div class="item" style="background-color: #99882F;">8-杭州</div>
			<div class="item" style="background-color: #DD56F9;">9-东莞</div>
			<div class="item" style="background-color: #99882F;">10-佛山</div>
</div>

nowrapのデフォルトの効果：

ここに画像の説明を挿入します

明らかに、各子要素のコンテンツは、1行のすべての子要素を満たすように絞り込まれます。

ラップの効果：

ここに画像の説明を挿入します

残りのスペースが残りの子要素を収容できない場合、それは新しい行に表示され、子要素の内容は圧縮されません。

ラップリバース

ここに画像の説明を挿入します

同様に、残りのスペースが不足している場合、子要素は新しい行に表示されます。違いは、最初の行が一番下の行にあり、行が逆になっていることです。

フレックスフロー

flex-flowプロパティは、略語オプションの属性構文は次のとおりです。flex-directionflex-wrap

flex-flow：<flex-direction>  <flex-wrap>

フロントはflex-direction属性値であり、その後にflex-wrap属性値が続きます。

たとえば、レイアウトの主軸を水平方向に設定すると、サブ要素が複数行で表示されます。

.container{
				width: 250px;
				height: 130px;
				background-color: #556688;
				display: flex;
				flex-flow: row wrap;
				
			}

ここに画像の説明を挿入します

正当化-コンテンツ

サンプルコード：

.container{
				width: 250px;
				height: 130px;
				background-color: #556688;
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				
			}

主軸の方向、属性値の配置と分布を制御します。

フレックススタート：左揃え
フレックスエンド：右揃え
中央：中央揃え

space-between：パフォーマンスは両端で正当化されます。中間は中央の意味です。つまり、余分な空白は要素の中央領域にのみ割り当てられます。

スペースアラウンド：アラウンドとは、周囲を囲むことを意味します。重要な点は、サブ要素の2つの側面が等距離にあり、距離の幅が中央の間隔の幅のわずか1/2であるということです。

Space-evenly：evenlyは対称で等しいことを意味し、各サブ要素の間隔の幅で表され、その両側の幅は同じです。

アイテムを揃える

偶数の子要素の高さを設定するために、新しいCSSスタイルが追加されました。これは、属性値の違いを反映するためだけです。開発では、フレックスレイアウトを使用する場合、固定の高さまたは幅を設定することはお勧めしません。子要素。これは、Flexの柔軟性の概念からの逸脱です。子要素の幅と高さが別々に設定されている場合、デフォルトでは有効にならず、stretch default属性値で上書きされ、引き伸ばされます。

.container :nth-child(2n){
	height: 30px;
}

交差軸で制御されるすべてのサブ要素の配置（交差軸方向、属性値：

ストレッチ：デフォルト値、子要素をストレッチします。上記のレンダリングから、子要素divに高さが設定されていないことがわかりますが、親要素の高さでいっぱいです。これはストレッチの結果です。。align-items属性が設定されているかどうかに関係なく、子要素はデフォルトで引き伸ばされることに注意してください。子要素の高さに影響がない場合は、デフォルト値の属性で上書きされ、引き続き引き伸ばされます。これは、AndroidのneutronViewによって設定されたmatch_parent属性に少し似ています。
flex-start：すべての子要素が交差軸の上に配置され、子要素は引き伸ばされません

フレックスエンド：すべての子要素は交差軸の下に配置され、子要素は引き伸ばされません

center：すべての子要素が交差軸に沿って中央に配置され、子要素は引き伸ばされません。これは、垂直方向の中央配置によく使用されます。

ベースライン：すべてのサブ要素は、横軸方向にテキストベースラインと位置合わせされます。ベースラインを参照してください

整列-コンテンツ

align-itemsは、各行の主軸方向のすべての子要素の配置のみを制御します。全員が上または下に配置され、中央は子要素自体に基づいています。親要素の残りのスペースは、垂直方向（強調）。複数の行動を取る

.container{
				width: 250px;
				height: 130px;
				background-color: #556688;
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				
			}

ここに画像の説明を挿入します

align-itemsプロパティは、主軸（1、2、および3つの主軸）の配置のみを制御します。各線の間の間隔、および親要素の上下の間隔は規則的な分布を持たないため、スペースを割り当てることができません。そして、align-contentはこの問題を解決することができます。

個人的な理解では、フレックスレイアウトの行と同じ数の主軸があります

align-contentは、justify-content属性の機能と同様に、垂直方向（横軸）でのサブ要素のスペース割り当てと配置を制御するために使用され、その属性値もjustify-contentと同じです。。

サンプルコード：

.container{
	width: 250px;
	height: 130px;
	background-color: #556688;
	display: flex;
	flex-flow: row wrap;
	align-content: stretch;
				
}

フレックスレイアウトでは、親要素が固定の高さに設定されていない場合、親要素の高さは子要素の全高に従って展開されます。

ストレッチ：デフォルト値。サブ要素の各行は比例してストレッチされます。たとえば、要素の行は2つだけで、各行は50％でストレッチされます。以下に示す親要素の高さは130pxで、各行は1/3で均等に分割されます

フレックススタート：ストレッチせずに上部に揃える

フレックスエンド：ストレッチせずに下部に揃えます

center：パフォーマンスは全体的な垂直方向の中央揃えです

space-between：上部と下部が整列し、各行の間隔は同じです。

空間アラウンド：これは、上端部と下端部と同じ間隔（A）を有し、各ラインの間隔はまた、（B）は同じであるが、AとBとの間の間隔は等しくありません。

space-evenly：上端と下端の間のスペースは、各行の間のスペースと同じです。つまり、各行の要素が均等に分割されているだけです。

有効にするには、行を折り返すために、align-contentをflex-wrapと組み合わせて使用する必要があります。

align-items属性とalign-content属性を使用する場合は、特に注意する必要があります。デフォルトの属性値stretchの場合、子要素の高さが設定されていると、高さは有効にならず、引き伸ばされます。それぞれのルールに従って親要素を埋めます。

通常、align-itemsとalign-contentは同時に使用されません。

子要素に作用する属性

注文

特定の子要素の並べ替え位置を変更します。値が小さいほど、ランクが高くなります。デフォルト値は0です。たとえば、元の要素は次のように並べ替えられます。

ここに画像の説明を挿入します

すべての子要素の順序はデフォルトで0であることに注意してください

次に北京、サブ要素（北京）で順序を-1に設定している限り、このサブ要素を最初に並べ替えます。

#beijing{
	order: -1;
}

ここに画像の説明を挿入します

この時点で广州子要素の順序が1に設定されている場合、サブ要素（広州）は最後にルーティングされます。

#guangzhou{
	order: 1;
}

ここに画像の説明を挿入します

フレックスグロー

属性の拡張は、拡張を意味します。これは、残りのスペースが親要素で使用可能である場合に、子要素のサイズを拡張することです。

残りのスペースは、親コンテナーのサイズからすべての子要素を組み合わせたサイズを引いたものです。すべてのサブ要素が同じフレックスグロー係数を持っている場合、すべてのアイテムは同じ残りのスペースを取得します。それ以外の場合は、異なるフレックスグロー係数によって定義された比率に従って割り当てられます。

flex-growのデフォルト値は0です。これは、自己要素のサイズが拡大せず、負の数が無効であることを意味します。

子要素のフレックスグロー係数は同じです。

.container .item{
	flex-grow: 1;
				
}

ここに画像の説明を挿入します

各子要素は、残りのスペースを主軸の方向に均等に分割します。フレックスグロー係数が子要素ごとに異なる場合は、比率を1：2：3：4に設定します。

ここに画像の説明を挿入します

比率が大きいほど、割り当てられるスペースが大きくなります。これは、Androidの重み属性と同様です。

フレックスシュリンク

収縮は収縮を意味し、flex-shrinkは子要素の収縮規則を指定します。収縮は、子要素の幅の合計が親コンテナよりも大きい場合にのみ発生します。

flex-shrinkは負の値をサポートしていません。デフォルト値は1です。これは、すべてのフレックスアイテムがデフォルトで縮小することを意味します。0に設定すると、縮小せず、元のフィットコンテンツ幅が維持されることを意味します。

flex-shrinkがデフォルト値の1に設定されている場合、子要素は明らかに縮小しています。具体的な表現は、テキストが縮小して折り返されることです。これは、すべての子要素がデフォルト値1であることです。

ここに画像の説明を挿入します

flex-shrinkが0に設定されている場合、テキストは元の幅に従って表示されます。子要素の合計幅が親要素の幅よりも大きいため、オーバーフローの問題があることは明らかです。

ここに画像の説明を挿入します

単一の子要素に対してflex-shrinkを0.5または1に設定し、他の广州要素を0に設定します。例として子要素を取り上げます。

#guangzhou{
	flex-shrink: 0.5;
}
#shengjun{
	flex-shrink: 0;
}
#shanghai{
	flex-shrink: 0;
}
#beijing{
	flex-shrink: 0;
}

ここに画像の説明を挿入します

广州子要素のみが縮小され、子要素が占有できるようにスペースの50％が縮小されていることが青岛わかります。さらに、主軸方向のサブ要素に改行があってはならず、フレックスシュリンクはそれが線である場合にのみ有効になります。

フレックスグローとフレックスシュリンクの機能は、事前の機能とは正反対です。フレックスグローは、親要素が使用可能な場合に有効（拡張）になり、フレックスシュリンクは、残りの使用可能な要素が不十分な場合に有効（縮小）になります。

フレックスベース

主軸方向の子要素の初期サイズを指定し、設定スペースのサイズを予約するようにブラウザに指示します。

デフォルトでは、flex-basisはautoを指します。これは、子要素のサイズが要素のコンテンツに応じて自動的に指定されることを意味します。さらに、次のように、flex-basisを介して特定の値を指定できます。

.container{
				width: 250px;
				height: 100px;
				background-color: #556688;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
}

#guangzhou{
				flex-basis: 100px;
}

ここに画像の説明を挿入します

場合は广州、子要素のフレックス基礎が200pxのに設定されている、親要素が250ピクセルで、実際の广州子要素が200pxのに到達しないだろう、と他の子要素は、残りのスペースが不足しているため、子の親コンテナをオーバーフローしません要素のflex-shrinkのデフォルトはContractionです。

ここに画像の説明を挿入します

子要素にflex-basis属性とwidth属性の両方が設定されている場合、flex-basis属性の優先度が高くなり、widthは無視されます。

#guangzhou{
				flex-basis: 100px;
				width: 200px;
}

ここに画像の説明を挿入します

Flexの柔軟性を使用する場合、子要素に幅または高さを設定することはお勧めしません。これにより、柔軟性が失われます。さらに、Flexの一部のプロパティは幅または高さを無視します。

フレックス

フレックスプロパティは、フレックスグロー、フレックスシュリンク、フレックスベースの略です。文法：

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

2番目と3番目のパラメーター（flex-shrinkとflex-basis）はオプションです。デフォルト値は01autoです。

次のように分割します

フレックス：なし
フレックス：自動
フレックス：<'flex-grow'> <'flex-shrink'>？|| <'flex-basis'>

フレックス：なしはフレックスと同等です：00自動

ここに画像の説明を挿入します

flex：autoはflex：1 1autoと同等です

ここに画像の説明を挿入します

flex属性は、1つ、2つ、または3つの値を指定できます。特定の構文については、MDNのflexの概要を参照してください。

整列-自己

align-selfは、子要素の垂直方向（横軸）の配置を制御します。これは、align-itemsに似ています。align-selfは、子要素の配置を個別に制御できますが、align-itemsは親で使用されます。 element。すべての子要素の垂直方向の配置を制御します。その属性値はalign-itemsと同じです。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

親要素にalign-itemsが設定され、子要素にもalign-selfが設定されている場合、align-self値は、現在の子要素のalign-items属性値を上書きします。

.container{
				width: 250px;
				height: 100px;
				background-color: #556688;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
}

#guangzhou{
				align-self: flex-end;
}

ここに画像の説明を挿入します