CSS3 のディスプレイのグリッドレイアウトとフレックスレイアウトの詳細な説明
|
Gird レイアウトは Flex レイアウトといくつかの類似点があり、どちらもコンテナーの内部項目を分割します。
flex 柔軟なレイアウト (コンテナ属性) Flex は Flexible Box (略称: elastic box) の略で、任意のコンテナーを flex レイアウトに設定できます。 Flex はコンテナ (felx コンテナ) と呼ばれ、すべての子要素は自動的にコンテナのメンバーになります。
flex-direction属性: 主軸の方向（つまり、アイテムが配置される方向）を決定します。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-direction: 行;
}
row-reverse: 主軸は水平で、開始点は右端にあります。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-direction: 行;
}
列: 上端から始まる主軸の垂直方向。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-direction: 列;
}
column-reserve: 主軸は垂直で、開始点は下端にあります。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-direction:列の反転;
}
flex-wrap属性: 改行を定義する デフォルトでは、それらはすべて 1 つの軸上に揃えられます。 flex-wrap 属性の定義は、1 つの軸が収まらない場合に、対応する属性を使用して線を折り返すというものです。 nowrap (デフォルト): 改行なし。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-wrap: nowrap;
}
wrap: 最初の行を先頭にして折り返します。
.コンテンツボックス
{
ディスプレイ: フレックス;
flex-wrap: ラップ;
}
wrap-reverse: 最初の行を下にして行を折り返します。
.コンテンツボックス
{
ディスプレイ: フレックス;
flex-wrap: ラップを逆にする;
}
flex-flow 属性: flex-direction と flex-wrap の略語、デフォルト行は nowrap flex-flow プロパティは、flex-direction プロパティと flex-wrap プロパティの短縮形であり、デフォルト値は row nowrap です。
.コンテンツボックス
{
flex-flow: <flex-direction> || <flex-wrap>;
}justify-content プロパティ: 項目を主軸上に配置する方法を定義します。 justify-content プロパティは、主軸上の配置を定義します。 flex-start (デフォルト): 左揃え。
.コンテンツボックス{
ディスプレイ: フレックス;
コンテンツの配置: flex-start;
}
flex-end: 右揃え。
.コンテンツボックス{
ディスプレイ: フレックス;
コンテンツの端揃え: flex-end;
}
center: 中央揃え。
.コンテンツボックス{
ディスプレイ: フレックス;
コンテンツの中央揃え: 中央;
}
space-between: 両端を揃え、項目間に均等のスペースを残します。
.コンテンツボックス{
ディスプレイ: フレックス;
コンテンツの両端揃え: スペースの間;
}
space-around: 両側の間隔が等しく、各項目の両側の間隔が等しく、項目間の間隔が項目と境界線の間の間隔の 2 倍になります。
.コンテンツボックス{
ディスプレイ: フレックス;
コンテンツの両端揃え: スペースを空ける;
}
space-evenly: 項目間の間隔は均等です。
プロパティ: 交差軸上の配置を定義します ストレッチ (デフォルト): アイテムの高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナーの高さ全体を占有します。
.コンテンツボックス{
ディスプレイ: フレックス;
アイテムの位置を揃える: ストレッチ;
}
flex-start: 開始点に揃えます。
.コンテンツボックス{
ディスプレイ: フレックス;
align-items:flex-start;
}
flex-end: 終点を揃えます。
.コンテンツボックス{
ディスプレイ: フレックス;
align-items: flex-end;
}
center: 中心点の位置合わせ。
.コンテンツボックス{
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
}
ベースライン: プロジェクト内のテキストの最初の行のベースライン配置。
.コンテンツボックス{
ディスプレイ: フレックス;
align-items: ベースライン;
}
align-content属性: 複数の軸の配置を定義します プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。したがって、プロパティで flex-wrap を設定する必要があります。 ストレッチ: (デフォルト値) 軸は交差軸全体を占めます
.コンテンツボックス{
ディスプレイ: フレックス;
flex-wrap: ラップ;
align-content: ストレッチ;
}
flex-start: 開始点を交差軸の開始点に揃えます
.コンテンツボックス{
ディスプレイ: フレックス;
flex-wrap: ラップ;
align-content: flex-start;
}
flex-end: 終点の位置合わせ。交差軸の終点に合わせます。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-wrap: ラップ;
align-content:フレックスエンド;
}
中心: 交差軸の中心点に揃った中点配置
.コンテンツボックス{
ディスプレイ: フレックス;
flex-wrap: ラップ;
コンテンツの位置を中央揃えにします。
}
間隔: 軸は等間隔で配置され、交差軸の端と一直線に並び、軸間の間隔は均等に分散されます。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-wrap: ラップ;
align-content: スペース間のスペース;
}
space-around: 軸の両側の間隔は等しく、各軸の両側の間隔も等しい。つまり、軸間の間隔は、軸と境界線の間隔の2倍である。
.コンテンツボックス{
ディスプレイ: フレックス;
flex-wrap: ラップ;
align-content: スペースを空ける;
}
Flex レイアウト (プロジェクト属性) order 属性: 項目が配置される順序を定義します。 値が小さいほど、順位が高くなります。デフォルト値は 0 ですが、負の値も指定できます。
.box:n番目の子(2) {
注文:-2
}
.box:n番目の子(3) {
注文:-3
}
.box:n番目の子(4) {
注文:4
}
.box:n番目の子(5) {
注文:5
}
.box:n番目の子(6) {
注文:6
}
flex-grow属性: アイテムの拡大率を定義します デフォルト値は 0 です。つまり、余分なスペースがある場合、拡大されません。小数点も使用でき、残りのスペースを比例して占有します。 すべての項目の flex-grow 値が同じ場合、残りのスペースは均等に分割されます。
。箱 {
フレックス成長: 5;
}
1 つのアイテムの flex-grow が 2 で、他のアイテムの flex-grow が 1 の場合、そのアイテムが占める残りのスペースは他のアイテムの 2 倍になります。
.box:n番目の子(3) {
フレックス成長: 8;
}
例:
。箱 {
フレックス成長: 0;
}
.box:n番目の子(2) {
フレックス成長: 3;
}
.box:n番目の子(3) {
フレックス成長: 8;
}
.box:n番目の子(4) {
フレックス成長: 2;
}
.box:n番目の子(5) {
フレックス成長: 7;
}
グリッドレイアウト（コンテナプロパティ） グリッド レイアウトは、Web ページをグリッドに分割します。さまざまなグリッドを任意に組み合わせて、さまざまなレイアウトを作成できます。以前は、この効果は複雑な CSS フレームワークを通じてのみ実現できましたが、現在は Gird レイアウトを使用して実現できます。 コンテナー内の水平領域は行、垂直領域は列、行と列の交差部分はセルと呼ばれます。 通常、 グリッドを分割する線は「グリッド線」と呼ばれます。水平のグリッド線は行を分割し、垂直のグリッド線は列を分割します。 通常、 grid-template-columns プロパティ、grid-template-rows プロパティ コンテナーはグリッド レイアウトを指定した後、行と列に分割されます。 grid-template-column プロパティは各列の幅を定義し、grid-template-rows プロパティは各行の高さを定義します。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: 160px 160px 160px 160px 160px;
グリッドテンプレートの行: 160px 160px 160px 160px 160px;
}
/*または*/
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: 20% 20% 20% 20% 20%;
グリッドテンプレートの行: 20% 20% 20% 20% 20%;
}上記のコードは、5行5列のグリッドを指定しており、列の幅と行の高さはどちらも160pxです。
repeat() 関数 特にグリッドが多数ある場合、同じ値を繰り返し書き込むのは面倒な場合があります。このとき、repeat() 関数を使用して繰り返し値を簡略化できます。 repeat() は 2 つのパラメータを受け入れます。1 つ目は繰り返し回数、2 つ目は繰り返す値です。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
}
/*または*/
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: repeat(5, 20%);
グリッドテンプレート行: repeat(5, 20%);
}
repeat() を使用してパターンを繰り返すこともできます。 1 列目と 4 列目の幅は 160 ピクセル、2 列目と 5 列目の幅は 100 ピクセル、3 列目と 6 列目の幅は 140 ピクセルです。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(2, 160px 100px 140px);
}
キーワードの自動入力 セル サイズは固定されているが、コンテナー サイズが不確定な場合があります。各行 (または列) にできるだけ多くのセルを収容したい場合は、 auto-fill キーワードを使用して自動入力を指定できます。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: repeat(自動入力、160px);
}
fr キーワード 比例関係の表現を容易にするために、グリッド レイアウトでは fr キーワード (fraction の略で、「分数」を意味します) が提供されています。 2つの列の幅がそれぞれ1frと2frの場合、 後者は前者の2倍であることを意味します。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: 1fr 1fr;
}
fr は絶対長さの単位と組み合わせて使用することができ、非常に便利です。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: 150px 1fr 2fr;
}
最初の列の幅は150ピクセル、2番目の列の幅は3番目の列の半分です。 自動キーワード auto キーワードは、ブラウザ自体が長さを決定することを意味します。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: 160px 自動 160px;
}
最初の列と 3 番目の列の幅は 160 ピクセルで、セル コンテンツに min-width が設定されていて、この値が最大幅より大きい場合を除き、中央が最大幅になります。 minmax() 関数 minmax() 関数は長さの範囲を生成し、長さがこの範囲内であることを示します。最小値と最大値の 2 つのパラメータを受け入れます。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: 1fr 1fr minmax(100px, 1fr);
}
minmax(100px1fr) 関数は、列の幅が 100px 未満、1fr を超えることはできないことを示します。 グリッド線名 grid-template-columns 属性と grid-template-rows 属性では、後で簡単に参照できるように、括弧を使用して各グリッド ラインの名前を指定することもできます。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: [c1] 160px [c2] 160px [c3] 自動 [c4];
グリッドテンプレート行: [r1] 160px [r2] 160px [r3] 自動 [r4];
}
上記のコードは、3 行 3 列のグリッド レイアウトを指定しているため、垂直グリッド ラインが 4 本、水平グリッド ラインが 4 本あります。 8 行の名前は角括弧で囲まれています。グリッド レイアウトでは、[5 行目 5 行目] のように、同じ行に複数の名前を付けることができます。 レイアウト例 grid-template-columns プロパティは、Web ページのレイアウトに非常に便利です。 2 列レイアウトには 1 行のコードのみが必要です。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: 70% 30%;
}
左の列は 70% に設定され、右の列は 30% に設定されています。 伝統的な12グリッドレイアウトも書きやすいです。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: repeat(12, 1fr);
}
grid-row-gap プロパティ、grid-column-gap プロパティ grid-row-gap プロパティは行間の間隔 (行間隔) を設定し、grid-column-gap プロパティは列間の間隔 (列間隔) を設定します。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート行: repeat(4, 160px);
グリッドテンプレートの列: repeat(4, 160px);
グリッド行間隔: 50px;
グリッド列の間隔: 50px;
}
grid-gap プロパティ grid-gap プロパティは、grid-column-gap と grid-row-gap を組み合わせた略語です。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート行: repeat(4, 160px);
グリッドテンプレートの列: repeat(4, 160px);
グリッドギャップ: 50px;
}
grid-gap の 2 番目の値が省略されている場合、ブラウザは 2 番目の値が最初の値と等しいと想定します。最新の標準では、上記 3 つのプロパティ名の grid- プレフィックスが削除され、grid-column-gap と grid-row-gap はそれぞれ column-gap と row-gap と表記され、grid-gap は gap と表記されます。 grid-template-areas プロパティ グリッド レイアウトを使用すると、単一のセルまたは複数のセルから構成される「領域」を指定できます。 grid-template-areas プロパティは領域を定義するために使用されます。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート領域: 'abc'
'デフ'
'gh i';
}
上記のコードは、まず 9 つのセルを分割し、これらの 9 つのセルにそれぞれ対応する a から i までの 9 つの領域に名前を付けます。9 つのセルは、a、b、c の 3 つの領域に分割することもできます。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート領域: 'aaa'
「bbb」
'ccc';
}ヘッダー領域、下部はフッター領域、中央部分はメインとサイドバーとして使用できます。
.コンテンツボックス{
表示: グリッド;
grid-template-areas: "ヘッダー ヘッダー ヘッダー"
「メイン メイン サイドバー」
「フッター フッター フッター」;
}特定の領域を使用する必要がない場合は、「ドット」(.) を使用してその領域を表します。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート領域: 'a . c'
「d . f」
'g . i';
}grid-auto-flow プロパティ 1. グリッドを分割すると、コンテナのサブ要素が各グリッドに順番に自動的に配置されます。デフォルトの配置順序は「行が先、列が後」です。つまり、最初に最初の行を埋めてから、2 番目の行の配置を開始します。 次に、この順序は grid-auto-flow 属性によって決定され、デフォルト値は row (行が最初、列が後) です。これを列に設定することもできます。これは、「列が先、行が後」を意味します。
// 列が先、行が後。content-box {
表示: グリッド;
グリッドテンプレート領域: 'aaa'
「bbb」
'ccc';
グリッド自動フロー: 列;
}
行密と列密 grid-auto-flow プロパティは、行と列に設定するだけでなく、行密と列密に設定することもできます。これら 2 つの値は主に、特定の項目の位置を指定した後、残りの項目を自動的に設定するために使用されます。 項目 1 と項目 2 にそれぞれ 3 つのセルを持たせ、デフォルトの grid-auto-flow で次のレイアウトが生成されます。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
グリッド自動フロー: 行;
}
.box:n番目の子(1) {
グリッド列開始: 1;
グリッド列の終了: 4;
}
.box:n番目の子(2) {
グリッド列開始: 1;
グリッド列の終了: 4;
}
上の図では、項目 1 の後の位置が空になっています。これは、項目 3 がデフォルトで項目 2 の後に来るため、項目 2 の後に配置されます。設定を行密に変更すると、「最初に行、次に列」となり、スペースを入れずにできるだけ正確に行を埋めることになります。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, auto);
グリッドテンプレートの行: repeat(5, auto);
grid-auto-flow: row dense; /* スペースを避ける */
}
.box:n番目の子(1) {
グリッド列開始: 1;
グリッド列の終了: 4;
}
.box:n番目の子(2) {
グリッド列開始: 1;
グリッド列の終了: 4;
}
上の図では、まず 1 行目が埋められ、次に 2 行目が埋められるので、項目番号 3 は項目番号 1 の次になります。 設定を列密に変更すると、「最初に列、次に行」となり、できるだけ多くのスペースを埋めるようになります。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: repeat(5, auto);
グリッドテンプレートの行: repeat(5, auto);
grid-auto-flow: column dense; /* スペースを避ける*/
}
.box:n番目の子(1) {
グリッド列開始: 1;
グリッド列の終了: 4;
}
.box:n番目の子(2) {
グリッド列開始: 1;
グリッド列の終了: 4;
}
justify-items プロパティ、align-items プロパティ justify-items プロパティはセル コンテンツの水平位置 (左、中央、右) を設定し、align-items プロパティはセル コンテンツの垂直位置 (上、中央、下) を設定します。 これら 2 つの属性の書き方はまったく同じで、どちらも次の属性値を使用できます。
.コンテンツボックス{
項目の位置揃え: 開始 | 終了 | 中央 | 伸縮;
align-items: 開始 | 終了 | 中央 | 伸縮;
}start: セルの開始端を揃えます。 次の図に示すように、セルの内容は左揃えになります。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
justify-items: start; /* セルの開始端を揃える */
}
。箱 {
幅: 100ピクセル;
高さ: 100px;
}
セル コンテンツ ヘッダーが配置され、効果は次のようになります。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
align-items: start; /* セルコンテンツのヘッダーを揃える*/
}
。箱 {
幅: 100ピクセル;
高さ: 100px;
}
end: セルの終了端に揃えます。 セル内容の終了端が揃えられ、効果は以下のようになります。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
justify-items: end; /* セルの内容の端を揃える */
}
。箱 {
幅: 100ピクセル;
高さ: 100px;
}
center: セルは中央に配置されます。 Stretch: 単一セルの幅全体を埋めるように伸縮します (デフォルト値)。 アイテムを配置する place-items プロパティは、align-items プロパティと justify-items プロパティを組み合わせた短縮形です。 項目を配置: <align-items> <justify-items>; 配置アイテム: 開始 終了 2 番目の値が省略された場合、ブラウザはそれを最初の値と等しいとみなします。 justify-content プロパティ、align-content プロパティ justify-items プロパティは、コンテナー内のコンテンツ領域全体の水平位置 (左、中央、右) であり、align-items プロパティは、コンテンツ領域全体の垂直位置 (上、中央、下) です。 これら 2 つの属性の書き方はまったく同じで、どちらも次の属性値を使用できます。
.コンテンツボックス{
justify-content: start | end | center | Stretch | space-around | space-between | space-evenly;
align-content: start | end | center | Stretch | space-around | space-between | space-evenly;
}以下の図はすべて justify-items 属性を例として使用しています。align-items 属性の図は、水平方向が垂直方向に変更されている点を除いてまったく同じです。 start: コンテナの開始境界を揃えます。
end: コンテナの終了境界に揃えます。
center: コンテナ内の中央に配置します。
ストレッチ: アイテムのサイズが指定されていない場合は、グリッド コンテナー全体を占めるように伸縮します。
space-around: 各項目の両側に等しいスペースがあります。したがって、項目間の間隔は、項目とコンテナの境界線間の間隔の 2 倍になります。
space-between: 項目間の間隔は等しく、項目とコンテナの境界の間には間隔がありません。
space-evenly: 項目間の間隔は等しく、項目とコンテナの境界線間の間隔も同じ長さになります。
place-contentプロパティ place-content プロパティは、align-content プロパティと justify-content プロパティを組み合わせた短縮形です。 コンテンツを配置: <align-content> <justify-content>; 配置コンテンツ: スペースの周囲にスペースを均等に配置する; 2 番目の値を省略すると、ブラウザは 2 番目の値が 1 番目の値と等しいと想定します。 grid-auto-columns プロパティ、grid-auto-rows プロパティ 1. 一部のアイテムの指定された場所が既存のグリッドの外側にある場合があります。たとえば、グリッドには 3 つの列しかありませんが、特定の項目は 5 行目に指定されています。この時点で、ブラウザはアイテムを配置するための追加のグリッドを自動的に生成します。 2. grid-auto-columns 属性と grid-auto-rows 属性は、ブラウザによって自動的に作成される追加グリッドの列幅と行の高さを設定するために使用されます。これらは、grid-template-columns および grid-template-rows とまったく同じように記述されます。これら 2 つの属性が指定されていない場合、ブラウザはセル コンテンツのサイズに基づいて、新しく追加されたグリッドの列幅と行の高さを決定します。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(3, 250px);
グリッドテンプレートの行: repeat(3, 200px);
grid-auto-rows: 100px; /* 新しく追加された行の高さ */
}
.box:n番目の子(8) {
行の高さ: 80px;
grid-row-start: 4; /*4行目を設定します*/
grid-column-start: 2; /*2番目の列を設定*/
}
.box:n番目の子(9) {
行の高さ: 80px;
grid-row-start: 5; /*5行目を設定します*/
grid-column-start: 3; /*3番目の列を設定*/
}
上記のコードでは、新しく追加された行の高さが均一に 100 ピクセル (元の行の高さは 200 ピクセル) になるように指定しています。 grid-template プロパティは、grid-template-columns、grid-template-rows、grid-template-areas の 3 つのプロパティを組み合わせた略語です。 grid プロパティは、grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow の 6 つのプロパティを組み合わせた略語です。 読みやすさや書きやすさの観点から、属性を結合しないことが推奨されるため、ここではこの 2 つの属性について詳しく説明しません。 グリッド レイアウト (プロジェクト プロパティ) grid-column-start、grid-column-end、grid-row-start、grid-row-end プロパティ grid-column-startプロパティ: 左の境界線が配置される垂直グリッド線 grid-column-endプロパティ: 右の境界線が配置される垂直グリッド線 grid-row-startプロパティ: 上端の境界線が配置される水平グリッド線 grid-row-endプロパティ: 下境界線が配置される水平グリッド線 1. 項目 1 の左の境界線は 5 番目の垂直グリッド ラインであり、上の境界線は 3 番目の水平グリッド ラインです。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
}
.box:n番目の子(1) {
grid-row-start: 3; /* 上の境界線は3番目の水平グリッド線です*/
grid-column-start: 5; /* 左の境界線は 5 番目の垂直グリッド線です*/
}
項目番号 1 を除き、その他の項目は位置が指定されておらず、ブラウザによって自動的に配置されます。このとき、それらの位置はコンテナの grid-auto-flow 属性によって決定されます。この属性のデフォルト値は row であるため、「行が先、列が後」に配置されます。このプロパティの値をそれぞれ列、行密、列密に変更して、他の項目の位置がどのように変化するかを確認できます。 2. 4つの境界の位置を指定することの効果
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
}
.box:n番目の子(1) {
grid-row-start: 2; /* 上の境界線は 2 番目の水平グリッド線です */
grid-row-end: 5; /* 下の境界線は 5 番目の水平グリッド線です */
grid-column-start: 1; /* 左の境界線は最初の垂直グリッド線です*/
grid-column-end: 4; /* 右の境界線は 4 番目の垂直グリッド線です */
}
3. グリッド線番号を指定するだけでなく、これら4つの属性の値をグリッド線名として指定することもできます。 （効果は上記と同じです）
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: [c1] 160px [c2] 160px [c3] 160px [c4] 160px [c5] 160px [c6];
グリッドテンプレート行: [r1] 160px [r2] 160px [r3] 160px [r4] 160px [r5] 160px [r6];
}
.box:n番目の子(1) {
グリッド行開始: r2;
グリッド行の終了: r5;
グリッド列の開始: c1;
グリッド列の終了: c4;
}4. これら 4 つの属性の値は、span キーワードを使用して「スパン」、つまり左境界と右境界 (上境界と下境界) の間に何個のグリッドがまたがるかを示すこともできます。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレートの列: repeat(5, 160px);
グリッドテンプレートの行: repeat(5, 160px);
}
.box:n番目の子(1) {
grid-column-start: span 3; /* 左と右の境界線は 3 つのグリッドにまたがります*/
grid-row-start: span 2; /* 上部と下部の境界線は 2 つのグリッドにまたがります*/
}
効果は上記と同じです
.box:n番目の子(1) {
grid-column-end: span 3; /* 左と右の境界線は 3 つのグリッドにまたがります*/
grid-row-end: span 2; /* 上部と下部の境界線は 2 つのグリッドにまたがります*/
}これら 4 つのプロパティを使用すると、項目の重なりが発生する場合に、z-index プロパティを使用して項目の重なり順序を指定します。 グリッド列プロパティ、グリッド行プロパティ grid-column プロパティは、grid-column-start と grid-column-end を組み合わせた短縮形であり、grid-row プロパティは、grid-row-start と grid-row-end を組み合わせた短縮形です。
.box:n番目の子(1) {
グリッド列: <開始行> / <終了行>;
グリッド行: <開始行> / <終了行>;
}
.box:n番目の子(1) {
グリッド列: 1 / 4;
グリッド行: 2 / 4;
}
/* は */ と同等です
.box:n番目の子(1) {
グリッド列開始: 1;
グリッド列の終了: 4;
グリッド行開始: 2;
グリッド行の終了: 4;
}
これらの 2 つのプロパティで span キーワードを使用して、複数のグリッドにまたがることを示すこともできます。
.box:n番目の子(1) {
グリッド列: 1 / スパン 3;
グリッド行: 2 / スパン 3;
}
/* は */ と同等です
.box:n番目の子(1) {
グリッド列開始: 1;
グリッド列の終了: 4;
グリッド行開始: 2;
グリッド行の終了: 5;
}
スラッシュとそれに続く部分は省略可能で、デフォルトではグリッドにまたがります。
.box:n番目の子(1) {
グリッド列: 1;
グリッド行: 1;
}グリッドエリアプロパティ grid-area プロパティは、アイテムが配置される領域を指定します。
.コンテンツボックス{
表示: グリッド;
グリッドテンプレート列: repeat(3, auto);
グリッドテンプレート行: repeat(3, auto);
グリッドテンプレート領域: 'abc'
'デフ'
'gh i';
}
.box:n番目の子(1) {
grid-area: e; /* 項目 1 は領域 e にあります */
}
grid-area プロパティは、grid-row-start、grid-column-start、grid-row-end、grid-column-end を組み合わせた短縮形として使用して、項目の位置を直接指定することもできます。
.box:n番目の子(1) {
グリッド領域: <行開始> / <列開始> / <行終了> / <列終了>;
}
.box:n番目の子(1) {
グリッドエリア: 3 / 3 / 4 / 4;
}
justify-self プロパティ、align-self プロパティ、place-self プロパティ justify-self プロパティは、セル コンテンツの水平位置 (左、中央、右) を設定します。これは justify-items プロパティとまったく同じですが、単一の項目にのみ適用されます。 align-self 属性は、セル コンテンツの垂直位置 (上、中央、下) を設定します。これは、align-items 属性の使用方法とまったく同じで、単一の項目にのみ適用されます。 1. 両方の属性は次の 4 つの値を取ることができます。
.box:n番目の子(1) {
justify-self: 開始 | 終了 | 中央 | ストレッチ;
align-self: 開始 | 終了 | 中央 | ストレッチ;
}start: セルの開始端を揃えます。 end: セルの終了端に揃えます。 center: セルは中央に配置されます。 Stretch: セルの幅全体を埋めるように伸縮します (デフォルト値)。 以下は justify-self
.box:n番目の子(1) {
正当化-自己: 開始;
}
place-self プロパティは、align-self プロパティと justify-self プロパティを組み合わせた短縮形です。
.box:n番目の子(1) {
配置場所: <align-self> <justify-self>;
}例えば：
.box:n番目の子(1) {
place-self: 中心 中心;
}2 番目の値が省略されている場合、place-self プロパティは 2 つの値を等しいものとして扱います。 参照する Ruan Yifeng Flex レイアウトチュートリアル: 構文 Ruan Yifeng CSS グリッドレイアウトチュートリアル CSS3 のグリッドレイアウトとフレックスレイアウトの表示に関する記事はこれで終わりです。グリッドレイアウトとフレックスレイアウトの表示に関する詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: HTMLセマンティクスと関連するフロントエンドフレームワークの詳細な分析
推薦する
WeChatミニプログラムの開発をスピードアップするためのヒント
1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...
WeChatアプレット+EChartsで動的更新プロセス記録を実現
序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...
MySQL 5.6.22 のインストールと設定方法のグラフィックチュートリアル
このチュートリアルでは、MySQL5.6.22のインストールと設定方法の具体的なコードを参考までに共...
Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)
CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...
CSS マルチレベルメニュー実装コード
これは、Web ページを Windows のスタート メニューなどのデスクトップ プログラムのように...
CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています
CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...
MySQL Limitパフォーマンス最適化とページングデータパフォーマンス最適化の詳細な説明
MySQL Limit はセグメント内のデータベース データをクエリでき、主にページングで使用されま...
CSS3 を使用したテキスト折り紙効果のサンプルコード
序文この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と...
ログインボックスのドラッグ効果を実現するためのJavascript
この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参...
CSS3 でクールなスライス画像カルーセル効果を実現
今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...
SQL と NoSQL の違いのまとめ
主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...
nginx「504 ゲートウェイタイムアウト」エラーを解決する
ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...
Vue3 (III) ウェブサイトホームページレイアウト開発
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
Alibaba Cloud Server に Tomcat をインストールして設定し、外部ネットワーク アクセス ポートを追加するチュートリアル
Alibaba Cloud ServerはTomcatをインストールして構成し、外部ネットワークアク...
Nginxのアクセス制限設定の詳細な説明
Nginxのアクセス制限設定とはNginx のアクセス制限は、IP ベースのアクセス制御とユーザーベ...