FlexレイアウトとGridレイアウト
9783 ワード
かなり前からflexレイアウトを使っていて使いやすいと思っていましたが、互換性のためあまり使われていませんので、flexレイアウトを使うときは互換性を考慮すべきで、flexは移動端に対する互換性が高いです.
flexレイアウトはWebレイアウトです
一、互換性は以下の通り
二、容器の属性
1.display:flex/inline-flex
2.flex-direction主軸の方向(つまり項目の配列方向)を決める
flex
-
direction
:
row
|
row
-
reverse
|
column
|
column
-
reverse
;
row(デフォルト):主軸は水平方向で、始点は左端です.row-reverse:主軸は水平方向で、起点は右端にあります.
column:主軸は垂直方向で、始点は上に沿っています.
column-reverse:主軸は垂直方向で、起点は下に沿っています.
3.flex-wrapは改行しないことを決定して、デフォルトは改行しません
flex
-
wrap
:
nowrap
|
wrap
|
wrap
-
reverse
;
4.flex-flowはflex-directionとflex-wrapの書き方です
flex
-
flow
:
<
flex
-
direction
>
||
<
flex
-
wrap
>;
5.justify-contentプロジェクトの主軸の位置合わせを決定
flex-start(デフォルト):左揃えflex-end:右揃えセンター:中央space-between:両端が揃えられ、プロジェクト間の間隔が等しい.
space-around:各項目の両側の間隔が等しい.したがって、プロジェクト間の間隔は、プロジェクトと枠線の間隔の2倍になります.
6.align-itemは垂直位置を定義し、この定義によって垂直に中央に位置することができる.
flex-start:交差軸の始点位置合わせ.
flex-end:交差軸の終点位置合わせ.
センター:交差軸の中点揃え.
baseline:プロジェクトの最初の行のテキストのベースラインの位置合わせ.
stretch(デフォルト):プロジェクトが高さを設定していない場合、またはautoに設定されている場合、コンテナ全体の高さが満たされます.7.align-content
複数の軸の位置合わせを定義します.アイテムに軸が1本しかない場合は、このアトリビュートは機能しません.
flex-start:交差軸の始点に位置合わせします.
flex-end:交差軸の終点に位置合わせします.
センター:交差軸の中点に位置合わせします.
space-between:交差軸の両端に揃え、軸線間の間隔が平均的に分布します.
space-around:各軸線の両側の間隔が等しい.したがって、軸線間の間隔は、軸線と枠線の間隔よりも2倍大きい.
stretch(デフォルト):軸が交差軸全体を占めます.gridのレイアウトはとても良くて、しかし互換性は今とても良くなくて、いくつかのブラウザをテストして、グーグル、火狐、Operaを支持して、safariを支持しないで、IE 10以下、360、QQブラウザ
一、メッシュ容器
1.display:grid/grid-inline
2.
grid-template-columnsとgrid-template-rowsプロパティは、グリッドの列と行を明示的に設定できます.
fr単位は、弾列のメッシュ軌道を作成するのに役立ちます.これは、Flexboxの単位のない値のように、グリッドコンテナで使用可能な空間を表します.
minmax()関数を使用して、メッシュ軌道の最小または最大サイズを作成します.minmax()関数は、2つのパラメータを受け入れます.1番目のパラメータはグリッド軌道の最小値を定義し、2番目のパラメータはグリッド軌道の最大値を定義します.任意の長さ値、auto値を受け入れることができます.auto値により、メッシュレールがコンテンツの寸法に基づいて引張られたり、押し出されたりすることができます.
repeat()は、重複するメッシュ軌道を作成できます.これは、等しいサイズのメッシュ項目と複数のメッシュ項目を作成するのに適しています.repeat()は、2つのパラメータを受け入れます.1つ目のパラメータは、メッシュ軌道が繰り返される回数を定義し、2つ目のパラメータは、各軌道のサイズを定義します.
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px;
二、間隔
1.
grid-column-gap
列と列の間隔の作成
2.
grid-row-gap
行と行の間隔の作成
3.
grid-gap
grid-gapはgrid-row-gapとgrid-column-gapの2つのプロパティの略で、2つの値を指定した場合、最初の値はgrid-row-gapの値を設定し、2番目の値はgrid-column-gapの値を設定します.値が1つしか設定されていない場合は、テーブル
行と列の間隔が等しい、すなわちgrid-row-gapとgrid-column-gapの値が同じである.
三、グリッド線
1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】
グリッド線を使用して、グリッド項目を配置できます.グリッド線は、実際には、グリッド列または行の間にある線の開始、終了を表します.各線はグリッド軌道から始まり、グリッドのグリッド線は1から始まり、各グリッド線は1ずつ増加します.
2.【grid-row】【grid-column】
grid-rowはgrid-row-startとgrid-row-endの略です.grid-columnはgrid-column-startとgrid-column-endの略記である.値が1つしか指定されていない場合はgrid-row-start(grid-column-start)値を指定します.2つの値が指定されている場合、1つ目の値はgrid-row-start(grid-column-start)の値で、2つ目の値はgrid-row-end(grid-column-end)の値で、両者の間には/で区切らなければなりません.
grid-row: 2;
grid-column: 3 / 4;
3.
キーワードspanの後に数字が続き、何列または行をマージするかを示します.
4.
【grid-area】
4つの値を指定します.1つ目の値はgrid-row-start、2つ目の値はgrid-column-start、3つ目の値はgrid-row-end、4つ目の値はgrid-column-endです.
grid-area: 2 / 2 / 3 / 3;
5.グリッド線の名前付け
グリッド線の名前を割り当てるには、カッコ[グリッド線名]を使用し、グリッド軌道の寸法値の直後に付ける必要があります.
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
repeat()関数を使用して、グリッド線に同じ名前を割り当てることができます.
repeat()関数を使用してグリッド線の名前を付けると、複数のグリッド線が同じグリッド線名を持つようになります.同じグリッド線名は、グリッド線の位置と名前を指定します.また、グリッド線名の後ろに対応する数値が自動的に追加され、グリッド線名も一意の識別子になります.
同じグリッド線名を使用して、グリッド項目の位置を設定します.グリッド線の名前と数字の間にはスペースが必要です
6.グリッド領域の名前付け
grid-template-areas
参照メッシュ領域名は、メッシュ項目の位置を設定することもできます
7.
grid-auto-flow
メッシュのデフォルトフロー方向はrowで、grid-auto-flowプロパティでメッシュフローの方向をcolumnに変更できます.
grid-auto-flow: column
四、位置合わせ
【メッシュ項目の位置合わせ(Box Alignment)】
CSSのBox Alignment Moduleでは、グリッド項目がグリッド行または列軸に沿って整列することを補完します.
【justify-items】
【justify-self】
justify-itemsとjustify-selfは、グリッド項目が行軸に沿って整列する方法を指定します.align-itemsおよびalign-selfは、グリッド項目が列軸に沿って整列する方法を指定します.
justify-itemsとalign-itemsをメッシュコンテナに適用
【align-items】
【align-self】
align-selfプロパティとjustify-selfプロパティは、グリッドプロジェクトの自己配置に使用されます.
この4つの属性は、主に次の属性値を受け入れます.
flexレイアウトはWebレイアウトです
一、互換性は以下の通り
二、容器の属性
1.display:flex/inline-flex
2.flex-direction主軸の方向(つまり項目の配列方向)を決める
flex
-
direction
:
row
|
row
-
reverse
|
column
|
column
-
reverse
;
row(デフォルト):主軸は水平方向で、始点は左端です.row-reverse:主軸は水平方向で、起点は右端にあります.
column:主軸は垂直方向で、始点は上に沿っています.
column-reverse:主軸は垂直方向で、起点は下に沿っています.
3.flex-wrapは改行しないことを決定して、デフォルトは改行しません
flex
-
wrap
:
nowrap
|
wrap
|
wrap
-
reverse
;
4.flex-flowはflex-directionとflex-wrapの書き方です
flex
-
flow
:
<
flex
-
direction
>
||
<
flex
-
wrap
>;
5.justify-contentプロジェクトの主軸の位置合わせを決定
justify-content: flex-start | flex-end | center | space-between | space-around;flex-start(デフォルト):左揃えflex-end:右揃えセンター:中央space-between:両端が揃えられ、プロジェクト間の間隔が等しい.
space-around:各項目の両側の間隔が等しい.したがって、プロジェクト間の間隔は、プロジェクトと枠線の間隔の2倍になります.
6.align-itemは垂直位置を定義し、この定義によって垂直に中央に位置することができる.
align-items: flex-start | flex-end | center | baseline | stretch;flex-start:交差軸の始点位置合わせ.
flex-end:交差軸の終点位置合わせ.
センター:交差軸の中点揃え.
baseline:プロジェクトの最初の行のテキストのベースラインの位置合わせ.
stretch(デフォルト):プロジェクトが高さを設定していない場合、またはautoに設定されている場合、コンテナ全体の高さが満たされます.7.align-content
複数の軸の位置合わせを定義します.アイテムに軸が1本しかない場合は、このアトリビュートは機能しません.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;flex-start:交差軸の始点に位置合わせします.
flex-end:交差軸の終点に位置合わせします.
センター:交差軸の中点に位置合わせします.
space-between:交差軸の両端に揃え、軸線間の間隔が平均的に分布します.
space-around:各軸線の両側の間隔が等しい.したがって、軸線間の間隔は、軸線と枠線の間隔よりも2倍大きい.
stretch(デフォルト):軸が交差軸全体を占めます.gridのレイアウトはとても良くて、しかし互換性は今とても良くなくて、いくつかのブラウザをテストして、グーグル、火狐、Operaを支持して、safariを支持しないで、IE 10以下、360、QQブラウザ
一、メッシュ容器
1.display:grid/grid-inline
2.
grid-template-columnsとgrid-template-rowsプロパティは、グリッドの列と行を明示的に設定できます.
fr単位は、弾列のメッシュ軌道を作成するのに役立ちます.これは、Flexboxの単位のない値のように、グリッドコンテナで使用可能な空間を表します.
grid-template-columns: 1fr 1fr 2frminmax()関数を使用して、メッシュ軌道の最小または最大サイズを作成します.minmax()関数は、2つのパラメータを受け入れます.1番目のパラメータはグリッド軌道の最小値を定義し、2番目のパラメータはグリッド軌道の最大値を定義します.任意の長さ値、auto値を受け入れることができます.auto値により、メッシュレールがコンテンツの寸法に基づいて引張られたり、押し出されたりすることができます.
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;repeat()は、重複するメッシュ軌道を作成できます.これは、等しいサイズのメッシュ項目と複数のメッシュ項目を作成するのに適しています.repeat()は、2つのパラメータを受け入れます.1つ目のパラメータは、メッシュ軌道が繰り返される回数を定義し、2つ目のパラメータは、各軌道のサイズを定義します.
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px;
二、間隔
1.
grid-column-gap
列と列の間隔の作成
2.
grid-row-gap
行と行の間隔の作成
3.
grid-gap
grid-gapはgrid-row-gapとgrid-column-gapの2つのプロパティの略で、2つの値を指定した場合、最初の値はgrid-row-gapの値を設定し、2番目の値はgrid-column-gapの値を設定します.値が1つしか設定されていない場合は、テーブル
行と列の間隔が等しい、すなわちgrid-row-gapとgrid-column-gapの値が同じである.
三、グリッド線
1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】
グリッド線を使用して、グリッド項目を配置できます.グリッド線は、実際には、グリッド列または行の間にある線の開始、終了を表します.各線はグリッド軌道から始まり、グリッドのグリッド線は1から始まり、各グリッド線は1ずつ増加します.
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;2.【grid-row】【grid-column】
grid-rowはgrid-row-startとgrid-row-endの略です.grid-columnはgrid-column-startとgrid-column-endの略記である.値が1つしか指定されていない場合はgrid-row-start(grid-column-start)値を指定します.2つの値が指定されている場合、1つ目の値はgrid-row-start(grid-column-start)の値で、2つ目の値はgrid-row-end(grid-column-end)の値で、両者の間には/で区切らなければなりません.
grid-row: 2;
grid-column: 3 / 4;
3.
キーワードspanの後に数字が続き、何列または行をマージするかを示します.
grid-row: 1 / span 3;
grid-column: span 2;4.
【grid-area】
4つの値を指定します.1つ目の値はgrid-row-start、2つ目の値はgrid-column-start、3つ目の値はgrid-row-end、4つ目の値はgrid-column-endです.
grid-area: 2 / 2 / 3 / 3;
5.グリッド線の名前付け
グリッド線の名前を割り当てるには、カッコ[グリッド線名]を使用し、グリッド軌道の寸法値の直後に付ける必要があります.
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
repeat()関数を使用して、グリッド線に同じ名前を割り当てることができます.
grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);repeat()関数を使用してグリッド線の名前を付けると、複数のグリッド線が同じグリッド線名を持つようになります.同じグリッド線名は、グリッド線の位置と名前を指定します.また、グリッド線名の後ろに対応する数値が自動的に追加され、グリッド線名も一意の識別子になります.
同じグリッド線名を使用して、グリッド項目の位置を設定します.グリッド線の名前と数字の間にはスペースが必要です
grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;6.グリッド領域の名前付け
grid-template-areas
参照メッシュ領域名は、メッシュ項目の位置を設定することもできます
grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 150px 1fr 100px;grid-template-columns: 1fr 200px;7.
grid-auto-flow
メッシュのデフォルトフロー方向はrowで、grid-auto-flowプロパティでメッシュフローの方向をcolumnに変更できます.
grid-auto-flow: column
四、位置合わせ
【メッシュ項目の位置合わせ(Box Alignment)】
CSSのBox Alignment Moduleでは、グリッド項目がグリッド行または列軸に沿って整列することを補完します.
【justify-items】
【justify-self】
justify-itemsとjustify-selfは、グリッド項目が行軸に沿って整列する方法を指定します.align-itemsおよびalign-selfは、グリッド項目が列軸に沿って整列する方法を指定します.
justify-itemsとalign-itemsをメッシュコンテナに適用
【align-items】
【align-self】
align-selfプロパティとjustify-selfプロパティは、グリッドプロジェクトの自己配置に使用されます.
この4つの属性は、主に次の属性値を受け入れます.
auto | normal | start | end | center | stretch | baseline | first baseline | last baseline