フレックスレイアウト
従来のCSS2ボックスモデルは、浮動小数点位置レイアウトを使用します。【PC側】
CSS3のフレキシブルボックスモデルはフレックスレイアウトを採用しています。[モバイル端末、レスポンシブブートストラップ]
ボックスモデルの分類
ボックスモデル分類：IEボックスモデル、標準ボックスモデル、本質的な違い：幅と高さの計算方法
Flexレイアウトの条件
- フレックスコンテナ：フレックスコンテナ。
フレックスボックスレイアウト（display：flex;）が有効になっているブロックレベルの要素は、フレックスコンテナと呼ばれます。 - フレックスアイテム：フレックスアイテム。
Flexコンテナ内のサブブロックレベルの要素。
（1）メインサイズ、主軸方向のフレックスアイテムの幅。
（2）クロスサイズ、クロス軸方向のフレックスアイテムの高さ。 - 主軸：Flexコンテナの主軸。主軸はデフォルトで水平軸を指します。
（1）メインスタート、スピンドルの開始位置。
（2）メインエンド、スピンドルの終了位置。 - 交差軸：「交差軸」とも呼ばれるFlexコンテナの交差軸。交差軸は、デフォルトで垂直軸を指します。
（1）クロススタート、クロス軸の開始位置。
（2）クロスエンド、クロス軸の終了位置。
注：Flexテクノロジーを有効にすると、float、clear、vertical-alignは使用できなくなります。
シーン
小さなプログラムや携帯端末の開発では、さまざまなサイズの端末デバイスへの適応を考慮する必要があります。
従来のWeb開発では、ボックスモデルが使用され、レイアウトは表示によって実現されます。インライン|ブロック|インライン-ブロック、位置、フロート。柔軟性に欠け、一部の適応効果を実現するのは困難です。たとえば
、次の一般的な例情報リストには異なるコンテンツの高さが必要です。確かに、垂直方向の中央に配置してください。この場合、フレックスレイアウトを使用することをお勧めします。
高さ情報が固定されていない例では、次の2つのプロパティを設定するだけで済みます。不確実なコンテンツの下で垂直方向のセンタリングを実現するためのコンテナ：
display
は、ボックスモデルの水平方向の配置を設定し
ますjustify- content.container {display：flex; flex-decoration：column; justify-content：center;}
Flexコンテナに作用するCSS3のFlexレイアウトプロパティ
Flexレイアウトを有効にする方法：display：flex;
（1）Flexアイテムは、デフォルトで主軸に沿ってFlexコンテナに配置されます。
（2）Flex Itemは、デフォルトでFlexContainerで改行を許可しません。
フレックスコンテナの幅がすべてのフレックスアイテムの幅の合計よりも小さい場合、各フレックスアイテムは
フレックスコンテナの幅を元の幅に比例して均等に分割します。
（3）主軸上に配置されるフレックスアイテムは、幅またはフレックスグローである必要があり、高さは省略または
自動にすることができます。
共通の親属性
1. flex-direction：主軸の方向を設定します。
値：
（1）行-デフォルト値。これは、主軸の方向が水平であることを意味します。[フロートに相当：左;]
（2）行反転。これは、主軸の方向が水平方向と反対であることを意味します。【フロート相当：右】
（3）主軸の方向が垂直方向であり、主軸と交差軸が入れ替わっていることを示す柱。
（4）列反転。主軸の方向が垂直方向と反対であることを示します。
2. justify-content：FlexコンテナのFlexアイテムの主軸の配置を設定します。
値：
（1）flex-start、デフォルト値、Flex Itemは、Flexコンテナの主軸の開始位置に沿って配置されます。
（2）フレックスエンド、フレックスアイテムは、フレックスコンテナの主軸の終了位置に沿って配置されます。
（3）中央、フレックスアイテムはフレックスコンテナの主軸に沿って中央に配置されます。
（4）スペース-フレックスアイテムはフレックスコンテナ内で均等に分散され、すべてのフレックスアイテム間
の間隔は同じです。
（5）スペースアラウンド、フレックスアイテムはフレックスコンテナ内に均等に分散され、すべてのフレックスアイテムの
両端間の距離は同じです。
（6）スペース-均等に、アイテム間の距離、最初のアイテムと最初のアイテムからの主軸の端との間の距離、および主軸の終わりは、アイテム間の距離に等しい。
3. align-items：FlexContainerのFlexItemの交差軸の配置を設定します。
値：
（1）フレックススタート、フレックスアイテムはフレックスコンテナの交差軸の開始位置に沿って配置されます。
（2）フレックスエンド、フレックスアイテムは、フレックスコンテナの交差軸の終了位置に沿って配置されます。
（3）中央、フレックスアイテムはフレックスコンテナの交差軸に沿って中央に配置されます。
（4）ストレッチ、デフォルト値、フレックスアイテムはフレックスコンテナ内でストレッチおよび整列します。
Flex Itemが高さまたはheight：autoを指定しない場合、FlexItemの高さはFlexContainerと同じ
です。
（5）ベースライン、各フレックスアイテムはベースラインに対して整列されます。
A. Flexアイテム内にテキストコンテンツがない場合、FlexアイテムはFlexコンテナの上部にあり、
各Flexアイテムの下部が整列されます。
B. Flexアイテムの内部にテキストコンテンツがある場合、各Flexアイテムはテキストベースラインに対して整列されます。
4. flex-wrap：FlexアイテムをFlexコンテナに表示できるようにするかどうかを設定します。
値：（1）nowrap、デフォルト値、改行は許可されていません。
（2）折り返し、フレックスコンテナの幅が各フレックスアイテムの合計よりも小さい場合に改行できるようにします。
（3）ワープリバース。行の折り返しと垂直方向のリバースレイアウトが可能です。
5. align-content：複数のスピンドルの場合、クロス軸に対するフレックスアイテムの配置を設定します。
マルチスピンドル効果を実現する方法：（1）フレックスコンテナの幅は、すべてのフレックスアイテムの幅の合計よりも小さくなっています。
（2）改行を許可します。
値：（1）フレックススタート、複数のスピンドルが交差軸の開始位置に交差軸の方向に位置合わせされます。
（2）フレックスエンド、複数のスピンドルがクロス軸の方向のクロス軸の終了位置に位置合わせされます。
（3）中心、通常は主軸の中心と交差軸方向に位置合わせされます。
（4）ストレッチ、デフォルト値、ストレッチアライメント。
（5）間隔-間、複数のスピンドル間の間隔は一定です。
（6）スペースアラウンドでは、各スピンドルの両側の距離は同じです。
（7）間隔-均等に、線の間の間隔、および最初の線と交差軸の終点および終点線の終点との間の距離は等しい。
align-contentはalign-itemsに似ており、混乱しやすいです。
まず、明確にします。align-contentは全体として複数の行を整列し、コンテナーは行の折り返しを有効にする必要があります。
比較：
違い：
属性値に関して、align-contentにはalign-itemsよりも2つの値があります：space-betweenとspace-around
6.複合属性
flex-flow属性（Flexコンテナに作用する複合属性）：
方向と折り返しのコレクションと同等
flex-flow：row nowrap; / *デフォルト値、行の折り返しなしで順番に配置/
flex-flow：row-reverse wrap; /逆の順序で配置し、自動的に折り返します* /
Flexアイテム（サブアイテム）に作用するCSS3のFlexレイアウトプロパティ
1、フレックス属性
サブアイテムによって割り当てられる残りのスペースを定義し、flexを使用してコピー数を示します。これ
は、数値またはパーセンテージで表すことができます。
flex: <number>; // flex 的值是数字
flex:1;
2. flex-basis：Flexアイテムが占めるメインサイズを設定します。アイテム幅プロパティの代替
値：
（1）単位付きの数値。
（2）パーセンテージ。
A. Flex Containerで行の折り返しが許可されている場合、100％がFlexContainerの幅全体を占めます。
B. Flex Containerが改行を許可しない場合、100％がFlexContainerの残りの幅を占有します。
（3）auto、デフォルト値、Flex Itemが占めるスピンドルスペースのサイズは、widthプロパティの対象となります。
width属性が設定されていない場合、値は無効です。
幅とフレックスベースが同時に存在し、それらの値が競合する場合、フレックスアイテムはフレックスベースを標準として採用します。
flex-basisプロパティ：•
コンテナがflex-directionをrowまたはrow-reverseに設定すると、flex-basisとwidthが同時に存在し、flex-basisがwidthよりも優先されます。つまり、flex-basisがこのときのwidthプロパティ。
•
コンテナがflex-directionをcolumnまたはcolumn-reverseに設定すると、flex-basisとheightが同時に存在し、flex-basisがheightよりも優先されます。つまり、この時点でflex-basisがheight属性に置き換わります。 。
•フレックスベースと幅（または高さ）のいずれかが自動の場合、非自動の方が優先されることに注意してください。
3.順序：フレックスコンテナ内のフレックスアイテムの表示順序（主軸に沿った配置順序）を設定します。
値：
（1）0、Flexコンテナ内のFlexアイテムのコード記述順序に従って配置されます。
（2）単位のない整数は、整数の昇順で配置されます。
4. align-self、クロス軸自体に対する特定のフレックスアイテムの配置を設定します。
値：
（1）auto、デフォルト値、軸間位置合わせは、align-itemsによって設定された属性に従って実行されます。コンテナーがalign-itemを設定しない場合、属性値はstretchです。
（2）フレックススタート
（3）フレックスエンド
（4）センター
（5）ベースライン
（6）ストレッチ
5.フレックスグロー：フレックスコンテナ内のフレックスアイテムの拡大率（アイテムの拡大率）を設定します。 。
値：
（1）デフォルト値の0。フレックスコンテナに空き領域がある場合、フレックスアイテムにはズーム効果がありません。
（2）単位のない整数。これは、フレックスコンテナに空き領域がある場合のフレックスアイテムの拡大率を表します
。
拡張係数flex-grow：
•シナリオ：grow Englishは、<expand、expand、increase>を意味します。これは、親要素の幅が子要素の幅の合計よりも大きく、親要素に余剰がある場合を意味します。次に、flex-growは問題ありません。子要素を展開して、親要素のスペースを共有します。
•値：flex-growのデフォルト値は0です。これは、要素が親要素の残りのスペースを要求しないことを意味します。値が0より大きい場合は、要求することを意味します。
6. flex-shrink：フレックスコンテナ内のフレックスアイテムの収縮率（アイテムの収縮率）を設定します。
値：
（1）1、デフォルト値。これは、スペースが不十分な場合、フレックスアイテムが縮小することを意味します。
（2）0は、スペースが不足している場合、フレックスアイテムも縮小しないことを意味します。
フレックスシュリンクの機能：
•アイテムが主軸方向にオーバーフローした場合、アイテムの縮小係数を設定することで、アイテムを圧縮してコンテナに収めることができます。属性値はアイテムの縮小係数であり、属性値は負でない数値です。
•flex-shrinkが設定されていない場合、デフォルトのflex-shrink値は1です。
** 7。複合属性**
フレックス属性（フレックスアイテムに作用する複合属性、単に理解してください）：
フレックスグロー、フレックスシュリンク、およびフレックスベースの短縮モード
値：
（1）なし、0 0自動と同等、
（2）自動、と同等11オート;
クラシックケースダイスモデル
<div class="demo">
<div class="box box1">
<div class="dot"></div></div>
<div class="box box2">
<div class="dot"></div>
</div>
<div class="box box3">
<div class="dot"></div>
</div>
<div class="box box4">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="box box5">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="box box6">
<div class="row"><div class="dot"></div></div>
<div class="row"><div class="dot"></div></div>
<div class="row"><div class="dot"></div></div>
</div>
<div class="box box7">
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="row">
<div class="dot"></div>
</div>
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="box box8">
<div class="dot"></div>
</div>
<div class="box box9">
<div class="dot"></div>
</div>
<div class="box box10">
<div class="dot"></div>
</div>
<div class="box box11">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="box box12">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="box box13">
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="box box14">
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="box box15">
<div class="dot"></div>
</div>
<div class="box box16">
<div class="dot"></div>
</div>
<div class="box box17">
<div class="dot"></div>
</div>
<div class="box box18">
<div class="row"><div class="dot"></div></div>
<div class="row"><div class="dot"></div></div>
<div class="row"><div class="dot1"></div></div>
</div>
<div class="box box19">
<div class="row"><div class="dot"></div></div>
<div class="row"><div class="dot"></div></div>
<div class="row"><div class="dot1"></div></div>
</div>
<div class="box box20">
<div class="row"><div class="dot"></div></div>
<div class="row"><div class="dot"></div></div>
</div>
<div class="box box21">
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="row">
<div class="dot"></div>
</div>
<div class="row">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
.demo{
width: 920px;
height: 400px;
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
}
.box{
width: 120px;
height: 120px;
border-radius: 10px;
background: rgba(0,0,0,0.7);
display: flex;
margin: 5px;
}
.dot{
width: 30px;
height: 30px;
background: #F5F5F5;
border-radius: 50%;
}
.dot1{
width: 30px;
height: 30px;
background: transparent;
border-radius: 50%;
}
.box2{
flex-direction: row;
justify-content: center;
}
.box3{
justify-content: flex-end;
}
.box4{
justify-content: space-between;
}
.box5{
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}
.box6{
flex-wrap: wrap;
align-content: space-between;
}
.box6 .row{
width: 100%;
display: flex;
}
.box6 .row:nth-of-type(2){
justify-content: center;
}
.box6 .row:nth-of-type(3){
justify-content: flex-end;
}
.box7{
flex-wrap: wrap;
align-content: space-between;
}
.box7 .row{
width: 100%;
display: flex;
justify-content: space-between;
}
.box7 .row:nth-of-type(2){
justify-content: center;
}
.box8{
flex-direction: column;
justify-content: center;
}
.box9{
justify-content: center;
align-items: center;
}
.box10{
justify-content: flex-end;
align-items: center;
}
.box11{
flex-direction: column;
justify-content: space-between;
}
.box12{
justify-content: space-between;
align-items: flex-end;
}
.box13{
justify-content: space-between;
}
.box13 .row{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box14{
justify-content: space-between;
}
.box14 .row{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box15{
flex-direction: column;
justify-content: flex-end;
}
.box16{
align-items: flex-end;
justify-content: center;
}
.box17{
align-items: flex-end;
justify-content: flex-end;
}
.box18,.box19{
flex-wrap: wrap;
align-content: space-between;
}
.box18 .row,.box19 .row{
width: 100%;
display: flex;
}
.box18 .row:nth-of-type(2){
justify-content: center;
}
.box19 .row:nth-of-type(2){
justify-content: flex-end;
}
.box20{
flex-wrap: wrap;
align-content: space-between;
}
.box20 .row{
width: 100%;
display: flex;
}
.box20 .row:nth-of-type(2){
justify-content: flex-end;
}
.box21{
flex-wrap: wrap;
align-content: space-between;
}
.box21 .row{
width: 100%;
display: flex;
justify-content: space-between;
}
.box21 .row:nth-of-type(2){
justify-content: center;
}
わずかに削除および変更
————————————————
この記事はCSDNブロガー「web_zsh」の元の記事です
元のリンク：https：//blog.csdn.net/web_only_/article/詳細/ 100707608