良い一日、友達！



これは、FlexboxおよびGridCSSモジュールのすべてのプロパティに関する完全なビジュアルチートシートガイドです。



主な情報源：フレキシボックスへの完全なガイド、グリッドへの完全なガイド。



記事の最後に、Flexboxシミュレーターの作成に関する小さなチュートリアルがあります。



それ以上の前文なし。

Flexbox（Flex、以下Flexと呼びます）

用語

Flexは個別のプロパティではなく、一連のプロパティを含むモジュール全体です。これらのプロパティの一部はコンテナ（フレックスコンテナと呼ばれる親要素）に追加され、その他は子要素（以下、フレックスアイテムと呼ばれる）に追加されます。 -要素））。



「通常の」レイアウトはブロック要素とインライン要素のフローに基づいていますが、フレックスレイアウトはフレックスフローの方向に基づいています。仕様からこの画像を見て、フレックスレイアウトの背後にある重要なアイデアを紹介します。







要素は、主軸に沿って（メインスタートからメインエンドまで）、またはクロス軸に沿って（クロススタートからクロスエンドまで）配置されます。

• — , , . ; «flex-direction» (, . )
• main-start | main-end — main-start main-end
• (main size) — (main dimension),
• — , .
• cross-start | cross-end — , cross-end cross-start
• (cross size) —

-

display

このプロパティはフレックスコンテナを定義します。割り当てられた値に応じてブロックまたはライン。これには、コンテナのすべての直接の子の「フレックスコンテキスト」が含まれます。

.container {
  display: flex; /*  inline-flex */
}

コンテナのCSS列のプロパティは機能しないことに注意してください。

フレックス方向

このプロパティは、主軸、つまりアイテムがコンテナに配置される方向を定義します。Flex自体（ラッパーがその機能を拡張することなく）は、単方向レイアウトの概念を実装します。したがって、要素は水平線または垂直列のいずれかに配置されます。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• 行（デフォルト）：アイテムは、ltrでは左から右に、rtlでは右から左に配置されます。
• 行-逆：アイテムの行順を逆にします-ltrでは右から左、rtlでは左から右
• 列：行と似ていますが、上から下へ
• column-reverse：row-reverseに似ていますが、下から上へ

フレックスラップ（ラップ、トランジション、スプリット）

デフォルトでは、すべてのアイテムが1行に配置されます。このプロパティを使用すると、必要に応じて要素を次の行に移動させることができます。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（デフォルト）：すべてのアイテムが1行にあります
• 折り返し：要素は上から下に複数の行にまたがることができます
• wrap-reverse：要素は下から上に複数の行にまたがることができます

フレックスフロー（フロー）

このプロパティは、コンテナの主軸と交差軸を定義するflex-directionとflex-wrapの省略形です。デフォルトは行nowrapです。

.container {
  flex-flow: column wrap;
}

justify-content（コンテンツを1行に揃える）

このプロパティは、主軸に沿った要素の配置を決定します。これにより、固定サイズの未使用要素または最大サイズに達したフレックス要素によって残された空き領域を分散できます。また、オーバーフローするアイテムの配置を制御することもできます。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start（デフォルト）：アイテムは主軸に沿ってコンテナの先頭に移動されます
• フレックスエンド：アイテムはコンテナの最後にプッシュされます
• start：「writing-mode」プロパティの値によって決定される要素がコンテナの先頭に移動されます
• end：要素は、「writing-mode」プロパティの値によって決定されるコンテナの最後にシフトされます
• 左：アイテムはコンテナの左端にプッシュされます。フレックス方向がない場合、動作は開始と同様です
• 右：アイテムはコンテナの右端に押し込まれています。フレックス方向がない場合、動作は開始と同じです
• center:
• space-between: , , — ,
• space-around: . , ; , . , ,
• space-evenly: ,

リストされているプロパティのサポートはブラウザによって異なることに注意してください。最も安全なのは、フレックススタート、フレックスエンド、センターです。



追加のキーワード「safe」および「unsafe」については、safeを使用すると、位置に関係なく、ページの外側に要素を描画することを回避できます。これにより、スクロールの可能性がなくなります。

アイテムの整列（アイテムの整列）

このプロパティは、要素が横軸に沿ってどのように配置されるかを決定します。これは、横軸（主軸に垂直）の正当化コンテンツと比較できます。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• ストレッチ（デフォルト）：要素はコンテナ全体を埋めるためにストレッチします（最小幅/最大幅によって異なります）
• フレックススタート/スタート/セルフスタート：アイテムはクロス軸の始点にオフセットされます。上記のプロパティの違いは重要ではなく、フレックス方向または書き込みモードによって異なります。
• フレックスエンド/エンド/セルフエンド：アイテムはクロス軸の端にオフセットされます。指定されたプロパティ間の違いは重要ではなく、フレックス方向または書き込みモードによって異なります
• 中央：要素は中央に配置されます
• ベースライン：要素はベースラインに沿って配置されます

修飾子キーワード「safe」および「unsafe」を追加設定として使用して、コンテンツにアクセスできない（アクセスできない、ページ外）要素の配置を回避できます。

align-content（複数行にまたがってコンテンツを整列）

このプロパティは、横軸に沿って空きスペースがある場合のコンテナラインの配置を決定します。これは、主軸に沿って個々の要素間にスペースを分散するjustify-contentに似ています。



問題のプロパティは、flex-wrapプロパティがwrapまたはwrap-reverseに設定されている場合に、複数行にまたがるコンテナコンテンツにのみ適用されることに注意してください。ワンライナーの場合（「flex-wrap」プロパティが「no-wrap」に設定されている場合）、align-contentを適用しても効果はありません。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• 通常（デフォルト）：線は通常の位置にあります
• flex-start / start：行がコンテナの先頭に移動されます。flex-startはflex-directionに依存し、startは書き込みモードに依存します
• フレックスエンド/エンド：ラインはコンテナの最後にプッシュされます。フレックスエンドはフレックス方向に依存し、エンドは書き込みモードに依存します
• 中央：線は中央に配置されます
• space-between：行は、最初の行がコンテナーの先頭に、最後の行が最後に配置され、残りの行が等間隔になるように配置されます。
• スペースアラウンド：ラインはそれらの間に等間隔で配置されます
• スペース均等：ラインは、各ラインの周囲に等間隔で配置されます
• ストレッチ：線が伸びて利用可能なすべてのスペースを埋めます

修飾子キーワード「safe」および「unsafe」を追加設定として使用して、コンテンツにアクセスできない（アクセスできない、ページ外）要素の配置を回避できます。

フレックスエレメントのプロパティ

注文（注文）

デフォルトでは、要素はマークアップにリストされている順序でコンテナーに配置されます。このプロパティを使用すると、これを制御できます。

.item {
  order: 5; /*    0 */
}

フレックスグロー（成長、拡張）

このプロパティは、必要に応じて要素が拡張できるかどうかを決定します。比率として機能する整数値を取ります。比率は、アイテムがコンテナ内で占有できるスペースの量を決定します。



すべてのアイテムのフレックスグローが1の場合、使用可能なスペースはアイテム間で均等に分散されます。アイテムの1つが2のフレックスグローを持っている場合、そのアイテムは残りのアイテムと比較して2倍のスペースを占有します（または少なくともそうしようとします）。

.item {
  flex-grow: 4; /*   0 */
}

負の値は無効です。

フレックスシュリンク（シュリンク、シュリンク）

このプロパティは、必要に応じて要素が圧縮できるかどうかを決定します。

.item {
  flex-shrink: 3; /*   1 */
}

負の値は無効です。

フレックスベース

このプロパティは、残りのスペースを割り当てる前の要素のデフォルトサイズを定義します。このサイズは、長さ（20％、5remなど）またはキーワードにすることができます。autoキーワードは、要素の「width」または「height」プロパティの値を使用することを意味します（以前は、autoの代わりにmain-sizeが使用されていました）。「content」キーワードは、要素のコンテンツを説明することを意味します。上記のキーワードはまだ十分にサポートされていないため、min-content、max-content、fit-contentの違いを区別することは困難です。

.item {
  flex-basis:  | auto; /*   auto */
}

このプロパティの値が0の場合、要素を囲むスペースは考慮されません。値が「auto」の場合、使用可能なスペースは「flex-grow」プロパティの値に従って割り当てられます。

フレックス

このプロパティは、flex-grow、flex-shrink、およびflex-basisの省略形です。2番目と3番目のパラメーター（flex-shrinkとflex-basis）はオプションです。デフォルトは01 autoで、autoは省略できます。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

プロパティ値が正しい順序で自動的に決定されるように、各プロパティを定義する代わりにこの省略形を使用することをお勧めします。

align-self（単一要素の配置）

このプロパティを使用すると、個々の要素のデフォルトまたはalign-selfアライメントを上書きできます。



使用可能な値については、align-itemsの説明を参照してください。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

float、clear、vertical-alignはフレックス要素に影響を与えないことに注意してください。

の例

非常に簡単な例から始めましょう-要素を中心に揃える問題を解決します。

.parent {
  display: flex;
  height: 300px; /*     */
}

.child {
  width: 100px;  /*     */
  height: 100px; /*     */
  margin: auto;  /* ! */
}

これは、「auto」に設定された「margin」プロパティがフレックスコンテナの使用可能なすべてのスペースを消費するという事実のおかげで機能します。したがって、垂直パディング値をautoに設定すると、要素が両方の軸で完全に中央に配置されます。



それでは、さらに多くのプロパティを使用してみましょう。メディアクエリを使用せずに画面幅に応じてサイズを変更できる6つの固定サイズ要素があります。主軸の利用可能なスペースが要素間で均等に分散されるようにします。

.flex-container {
  /*     - */
  display: flex;

  /*     ,
           
   *       :
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* ,  ,      */
  justify-content: space-around;
}

完了。少しスタイルを整える必要があります。







他のことを試してみましょう。サイトのヘッダーに右揃えのナビゲーションメニューがあり、それを中程度の画面の中央に配置し、小さな画面の1つの列に並べたいとします。簡単なピーシー。

/*   */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /*          */
  justify-content: flex-end;
}

/*   */
@media (max-width: 800px) {
  .navigation {
    /*                 */
    justify-content: space-around;
  }
}

/*   */
@media (max-width: 500px) {
  .navigation {
    /*           ()   () */
    flex-direction: column;
  }
}

要素の柔軟性を試してみましょう。マークアップ内の要素の順序に依存しないフルサイズのヘッダーとフッターを使用して、モバイルファーストの3列のレイアウトを作成するのはどうですか。

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/*   flex-basis       100% */
.wrapper > * {
  flex: 1 100%;
}

/*      
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/*   */
@media all and (min-width: 600px) {
  /*        */
  .aside { flex: 1 auto; }
}

/*   */
@media all and (min-width: 800px) {
  /*      main 
   *   main   2   ,  
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

役立つリソース

• 仕様
• MDN
• Flexboxチートシート
• Flexbox Froggy

サポート

グリッド（以下、グリッドまたはグリッドと呼びます）

CSSグリッドレイアウトは、これまでで最も強力なページレイアウトツールです。双方向システムです。これは、文字列でのみ機能するFlexとは異なり、文字列と列の両方で機能することを意味します。グリッドには、親要素（グリッドコンテナ、以下、コンテナと呼びます）のプロパティと子要素（グリッド要素、グリッド要素、以下、要素と呼びます）のプロパティが含まれます。

用語

グリッドコンテナ（以下、コンテナと呼びます）

値が「grid」の「display」プロパティが割り当てられた要素は、グリッドコンテナになります。このコンテナは、すべてのグリッドアイテムの直接の祖先です。次の例では、クラス「container」を持つdivはグリッドコンテナです。

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

グリッドライン（以下、ラインと呼びます）

グリッドの構造を形成する分割線。垂直または水平にすることができ、行または列の境界を示します。下の画像の黄色い線は、垂直グリッド線（列グリッド線）の例です。

グリッドトラック（以下、トラックまたはトラックと呼びます）

2つの隣接する線の間のスペース。トラックは、グリッドの行または列と考えることができます。これは、2行目と3行目の間のトラックの例です。

グリッドエリア（以下、エリアと呼びます）

4本の線の間の合計スペース。エリアは、任意の数のグリッドセルにまたがることができます。これは、水平線1と3と垂直線1と3の間の領域の例です。

グリッド要素（以下、要素と呼びます）

コンテナの子（直系の子孫）。次の例では、クラス「item」のアイテムはグリッドアイテムですが、クラス「sub-item」のアイテムはグリッドアイテムではありません。

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

グリッドセル（以下、セルと呼びます）

2つの隣接する水平線と垂直線の間のスペース。グリッドの基本単位です。これは、水平線1と2と垂直線2と3の間のセルの例です。

例

メディアクエリなしで画面幅に基づいて自動的にサイズ変更されるフレキシブル幅の列。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /*      min() */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /*    ,    */
  /* gap: 1rem */
}

グリッドコンテナのプロパティ

表示

このプロパティは、要素をグリッドコンテナにし、そのコンテンツのグリッドコンテキストを設定します。

.container {
  display: grid | inline-grid;
}

• グリッド-ブロックグリッド
• インライングリッド-インライングリッド

ネストされたグリッドを作成する機能は、CSSグリッドレベル2仕様に移動されていることに注意してください。

grid-template-columns、grid-template-rows

これらのプロパティは、スペースで区切られたグリッド値の列と行を定義します。値はトラックのサイズを表し、スペースはラインを表します。

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

• <track-size>-グリッドの空き領域の長さ、パーセンテージ、または割合（「fr」単位を使用）
• <行名>-任意の名前

トラック値の間に空白を残すと、線には自動的に正と負の番号が割り当てられます。

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

行名は明示的に指定できます。四角い括弧に注意してください。

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

行には複数の名前を付けることができます。ここでは、たとえば、2行目に2つの名前があります。

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

定義に繰り返しフラグメントが含まれている場合は、「repeat」ステートメントを使用して以下を短縮できます。

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

これは次と同等です。

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

複数の行に同じ名前がある場合は、行名とそのような行の数を使用できます。

.item {
  grid-column-start: col-start 2;
}

「fr」ユニットを使用すると、トラックサイズをコンテナの空き領域の一部として設定できます。以下の例では、各要素はコンテナの幅の3分の1です。

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

空き領域は、固定サイズの要素を差し引いた後に計算されます。次の例では、「fr」ユニットを使用して割り当て可能なスペースに50pxが含まれていません。

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

このプロパティは、「grid-area」プロパティで定義されたエリア名を使用してグリッドテンプレートを定義します。エリア名を繰り返すと、コンテンツは指定されたセル数だけ拡張されます。ドットは空のセルを意味します。この構文により、グリッドの構造を視覚化できます。

.container {
  grid-template-areas:
    " | . | none | ..."
    "...";
}

• <grid-area-name>-エリア名
• ..。-空のセル
• なし-エリアなし

例：

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

このコードは、幅4列、高さ3行のグリッドを作成します。最初の（一番上の）行は、ヘッダーによって完全に占有されています。中央の行は、2つの「メイン」領域、1つの空のセル、および1つの「サイドバー」領域で構成されています。最後の行は地下です。







定義の各行には、同じ数の列が必要です。



空のセルを表すために、任意の数のドットを使用できます。ドットの間にスペースがない限り、それらは空のセルのインジケーターです。



この構文は、線ではなく領域を表すために使用されることに注意してください。この構文を使用すると、領域の両側の行に自動的に名前が付けられます。リージョン名が「foo」の場合、リージョンの最初（最初）の行（行と列）は「foo-start」になり、最後の行（行と列）は「foo-end」になります。これは、上記の例のように、一部の行に複数の名前を付けることができることを意味します。左上の行には、header-start、main-start、footer-startの3つの名前があります。

グリッドテンプレート

このプロパティは、grid-template-rows、grid-template-columns、およびgrid-template-areasの省略形です。

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

• none-3つのプロパティすべての値をデフォルトにリセットします
• <grid-template-rows> / <grid-template-columns>-「grid-template-rows」プロパティと「grid-template-columns」プロパティを対応する値に設定し、「grid-template-areas」プロパティを「none」に設定します

より複雑ですが、同時に、3つのプロパティすべての値を定義するためのより便利な構文を使用できます：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

これは、次と同等です。

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

grid-templateは、ほとんどの場合に必要な暗黙のGridプロパティ（grid-auto-columns、grid-auto-rows、grid-auto-flowなど）をリセットしないため、代わりに「grid」プロパティを使用することをお勧めします。

column-gap、row-gap、grid-column-gap、grid-row-gap

これらのプロパティは、線のサイズを決定します。言い換えれば、それらは列/行間のインデントの量を決定します。

.container {
  /*  */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /*  */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

• <line-size>-インデントの量

例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  column-gap: 10px;
  row-gap: 15px;
}

パディングは、グリッドの端に沿ってではなく、列/行の間にのみ作成されます。



「grid-column-gap」プロパティと「grid-row-gap」プロパティの名前が「column-gap」と「row-gap」に変更されたことに注意してください。

ギャップ、グリッドギャップ

このプロパティは、row-gapおよびcolumn-gapの省略形です。

.container {
  /*  */
  gap: <grid-row-gap> <grid-column-gap>;

  /*  */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

• <grid-row-gap> <grid-column-gap>-パディングサイズ

例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  gap: 15px 10px;
}

「row-gap」プロパティが設定されていない場合は、「column-gap」プロパティに設定されます。



「grid-gap」プロパティの名前が「gap」に変更されたことに注意してください。

正当化-アイテム

このプロパティは、線（水平）軸に沿ったセル内のアイテムの配置を決定します（ブロック（列、垂直）軸に沿った配置を決定する「align-items」プロパティとは対照的です）。このプロパティの値は、コンテナ内のすべての要素に適用されます。

.container {
  justify-items: start | end | center | stretch;
}

• start-要素はセルの先頭に移動します（左の境界線）
• end-要素はセルの終わりにシフトされます（右の境界線）
• center-要素は中央に配置されます
• ストレッチ-要素はセルの全幅を埋めます

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

セルの線軸に沿った個々のアイテムの位置は、「justify-self」プロパティによって制御されます。

整列アイテム

このプロパティは、ボックス（列、垂直）軸に沿ったセル内のアイテムの配置を決定します（行（水平）軸に沿った配置を決定する「justify-items」プロパティとは対照的です）。このプロパティの値は、コンテナ内のすべての要素に適用されます。

.container {
  align-items: start | end | center | stretch;
}

• start-要素はセルの先頭にシフトされます（上部の境界線）
• end-要素はセルの終わりにシフトされます（下の境界線）
• 中央-アイテムは中央に配置されます
• ストレッチ-要素はセルの高さ全体を埋めます

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

セル列軸に沿った個々の要素の位置は、「align-self」プロパティによって制御されます。

場所-アイテム

このプロパティは、align-itemsおよびjustify-itemsの省略形です。

.container {
  place-items: <align-items> <justify-items>;
}

• <align-items> <justify-items>は、align-itemsの最初の値であり、justify-itemsの2番目の値です。2番目の値がない場合、最初の値が両方のプロパティに割り当てられます。

例：

.container {
  place-items: center start;
}

アイテムは、列軸に沿って中央に配置され、線軸に沿って原点に配置されます。

justify-content（列の配置）

グリッド要素（その列）の合計幅がコンテナの幅よりも小さい場合があります。これは、固定サイズの要素を定義するときに発生する可能性があります（たとえば、pxを使用）。この場合、コンテナ内のグリッド列の順序を定義できます。このプロパティは、線軸に沿ったグリッドの配置（列の配置）を決定します（ボックス（列）軸に沿ったグリッドの配置を決定する "align-content"プロパティ-行の配置とは対照的）。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• start-グリッドをコンテナの先頭（左の境界線）に移動します
• end-グリッドをコンテナの最後（右の境界線）に移動します
• center-グリッドは中央に配置されます
• stretch — ,
• space-around — ,
• space-between — , — ,
• space-evenly — ,

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

.container {
  justify-content: space-around;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-evenly;
}

align-content ( )

グリッド要素（その行）の合計の高さがコンテナの高さよりも低い場合があります。これは、固定サイズの要素を定義するときに発生する可能性があります（たとえば、pxを使用）。この場合、コンテナ内のグリッド行の順序を決定できます。このプロパティは、ボックス（列）軸に沿ったグリッドの配置-行の配置を定義します（インライン軸に沿ったグリッドの配置を決定する "justify-content"プロパティ-列の配置とは対照的）。

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• start-グリッドをコンテナの先頭（上部の境界線）に移動します
• end-グリッドをコンテナの最後（下の境界線）に移動します
• center-グリッドは中央に配置されます
• ストレッチ-グリッドがコンテナの高さ全体を占めるように線が引き伸ばされます
• space-around-ライン間の等間隔、およびコンテナのエッジの周りのその半分のスペース
• space-between-最初の行がコンテナの最初にシフトされ、最後の-最後に-空きスペースが残りの行に均等に分散されます
• スペース-均等-ライン間とコンテナの端の両方で等しいスペース

.container {
  align-content: start;
}

.container {
  align-content: end;
}

.container {
  align-content: center;
}

.container {
  align-content: stretch;
}

.container {
  align-content: space-around;
}

.container {
  align-content: space-between;
}

.container {
  align-content: space-evenly;
}

場所-コンテンツ

このプロパティは、align-contentおよびjustify-contentの省略形です。

.container {
  place-content: <align-content> <justify-content>;
}

• <align-content> <justify-content>はalign-contentの最初の値で、2番目はjustify-contentの値です。2番目の値がない場合、最初の値が両方のプロパティに割り当てられます。

例：

.container {
  place-content: center start;
}

行はコンテナの中央に配置され、列は先頭にあります。

grid-auto-columns、grid-auto-rows（暗黙のトラックのサイズ）

これらのプロパティは、自動生成されたトラック（暗黙のトラック）のサイズを決定します。暗黙のトラックは、グリッド内のセルよりも多くのアイテムがある場合、またはアイテムがグリッドの外側に配置されている場合に作成されます。

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

• <track-size>-グリッドの空き領域の長さ、パーセンテージ、または割合（「fr」単位を使用）

例：

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

これにより、2x2グリッドが作成されます。



「grid-column」プロパティと「grid-row」プロパティを使用して、アイテムを次のように配置するとします。

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

クラス「item-b」の要素は、垂直線5で始まり、垂直線6で終わりますが、これらの線は定義されていません。存在しない行を参照しているため、インデントを埋めるために暗黙のゼロ幅トラックが作成されます。「grid-auto-columns」プロパティを使用して、暗黙的なトラックの幅を定義できます。

.container {
  grid-auto-columns: 60px;
}

グリッド-自動フロー

自動配置アルゴリズムを使用して、グリッドの外側にアイテムを配置できます。問題のプロパティは、このアルゴリズムがどのように機能するかを決定します。

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

• 行（デフォルト）-アルゴリズムは現在の行を制限まで埋め、必要に応じて、現在の行の幅が十分でない場合、新しい行を作成します
• column-アルゴリズムは現在の列を限界まで埋め、必要に応じて、現在の列の高さが不十分な場合、新しい列を作成します
• 密-異なるサイズの要素がある場合のグリッドのインテリジェントな充填

密集するとアイテムの視覚的な順序が変わるため、アクセシビリティに悪影響を与える可能性があることに注意してください。



次のマークアップがあると仮定しましょう。

  <section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

5列2行のグリッドを定義し、「grid-auto-flow」プロパティを「row」（デフォルト）に設定します。

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

グリッドにアイテムを配置する場合、2つのアイテムのみを配置します。

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

「grid-auto-flow」プロパティの値は「row」であるため、グリッドは次の画像のようになります。クラス「item-b」、「item-c」、「item-d」の要素の配置に注意してください（行が優先されます）：







プロパティ「grid-auto-flow」の値を「column」に変更すると、グリッドは次のようになります。方法（列が優先されます）：

グリッド

このプロパティは、grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、およびgrid-auto-flowの省略形です（1つの宣言に含まれる場合があることに注意してください）。 「明示的」または「暗黙的」プロパティのみ）。

• none-すべてのプロパティはデフォルト値を受け入れます
• <grid-template> -grid-templateショートカットに似ています
• <grid-template-rows> / [auto-flow && density？] <grid-auto-columns>？-grid-template-rowsの値を定義します。キーワード「auto-flow」がスラッシュの右側にある場合、「grid-auto-flow」プロパティの値は「column」になります。自動フローに加えてキーワード「dense」が指定されている場合、自動ネストアルゴリズムはそれに応じてアイテムをパックします。「grid-auto-columns」プロパティの値を省略すると、その値は「auto」になります。
• [自動フロー&&高密度？] <grid-auto-rows>？/ <grid-template-columns> -grid-template-columnsの値を定義します。キーワード「auto-flow」がスラッシュの左側にある場合、「grid-auto-flow」プロパティの値は「row」になります。自動フローに加えてキーワード「dense」が指定されている場合、自動ネストアルゴリズムはそれに応じてアイテムをパックします。「grid-auto-rows」プロパティの値を省略すると、その値は「auto」になります。

次の2つのコードブロックは同等です。

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

次の2つのコードブロックは同等です。

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

次の2つのコードブロックは同等です。

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

また、次の2つのコードブロックも同等です。

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

この場合、より複雑ですが、同時に、「grid-template-areas」、「grid-template-rows」、「grid-template-columns」プロパティを同時に定義し、他のプロパティをデフォルト値に設定するためのより便利な構文を使用できます。 ..。このために必要なことは、ラインの名前とトラックのサイズを1つのライン上の対応する領域とともに定義することです。これは、例を使用して簡単に説明できます。

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

これは、次と同等です。

.container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

グリッドアイテムのプロパティ

グリッド要素に適用されたプロパティfloat、display：inline-block、display：table-cell、vertical-align、およびcolumn- *は効果がないことに注意してください。

grid-column-start、grid-column-end、grid-row-start、grid-row-end

これらのプロパティは、特定の行にスナップすることにより、グリッド内の要素の位置を決定します。grid-column-start / grid-row-startはアイテムの開始行であり、grid-column-end / grid-row-endは終了行です。

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

• <line>-番号（行番号にスナップ）または名前（行名にスナップ）にすることができます
• span <number>-要素は指定されたトラック数だけ引き伸ばされます
• span <name>-要素は指定された名前の行に到達するまで伸びます
• 自動-自動レイアウト、自動展開、またはデフォルトの1列ストレッチ

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

grid-column-end / grid-row-endプロパティ値が指定されていない場合、アイテムはデフォルトで1トラックを占有します。



要素は互いにオーバーラップできます。z-indexプロパティを使用して、要素のスタック順序を制御できます。

grid-column、grid-row

これらのプロパティは、それぞれgrid-column-start + grid-column-endおよびgrid-row-start + grid-row-endの省略形です。

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

• <start-line> / <end-line>-値は、スパンを含め、元のプロパティと同じです

例：

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

終了行が指定されていない場合、要素はデフォルトで1トラックになります。

グリッドエリア

このプロパティは、grid-template-areasプロパティの値として使用される要素の名前を定義します。grid-areaは、grid-row-start + grid-column-start + grid-row-end + grid-column-endの省略形としても使用できます。

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

• <name>-要素の任意の名前
• <row-start> / <column-start> / <row-end> / <column-end>-数字または行名にすることができます

要素の命名：

.item-d {
  grid-area: header;
}

grid-row-start + grid-column-start + grid-row-end + grid-column-endの省略形：

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

正当化-自己

このプロパティは、行軸に沿ったセル内の要素の配置を指定します（ボックス（列）軸に沿った配置を指定するalign-selfプロパティとは対照的です）。このプロパティは、単一セル内の要素に適用されます。

.item {
  justify-self: start | end | center | stretch;
}

• start-要素はセルの先頭に移動します（左の境界線）
• end-要素はセルの終わりにシフトされます（右の境界線）
• center-要素は中央に配置されます
• ストレッチ-要素はセルの幅全体を埋めます

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

justify-itemsプロパティは、線軸に沿ったすべてのグリッドアイテムの配置を制御するために使用されます。

整列-自己

このプロパティは、ボックス（列）軸に沿ったセル内のアイテムの配置を決定します（行軸に沿った配置を決定するjustify-selfプロパティとは対照的です）。このプロパティは、単一セル内の要素に適用されます。

.item {
  align-self: start | end | center | stretch;
}

• start-要素はセルの先頭（上部の境界線）に移動します
• end-要素はセルの終わりにシフトされます（下の境界線）
• center-要素は中央に配置されます
• ストレッチ-要素はセルの高さ全体を埋めます

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

align-itemsプロパティは、ブロック（列）軸に沿ったすべてのグリッドアイテムの配置を制御するために使用されます。

場所-自己

このプロパティは、align-selfおよびjustify-selfの省略形です。

• auto-デフォルト値
• <align-self> / <justify-self>は、align-selfの最初の値であり、justify-selfの2番目の値です。2番目の値を省略すると、最初の値が両方のプロパティに適用されます

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

• , px, rem, % .., , min-content, max-content, auto , , — (fr). grid-template-columns: 200px 1fr 2fr min-content
• , . , , 1fr, 200px: grid-template-columns: 1fr minmax(200px, 1fr)
• repeat() : grid-template-columns: repeat(10, 1fr) ( , 1fr)
• これらの機能の組み合わせにより、次のような驚くべきレイアウトの柔軟性が可能になります。grid-template-columns：repeat（auto-fill、minmax（200px、1fr））（グリッドセクションの冒頭の例から）

役立つリソース

• 仕様
• MDN
• グリッドチートシート
• グリッドガーデン

サポート

チュートリアル

このチュートリアルでは、基本的なFlexboxプロパティの簡単なトレーナーを作成します。

マークアップ

<main>
  <div id="controls">
    <div id="buttons">
      <button data-btn="addBtn">Add Item</button>
      <button data-btn="removeBtn">Remove Item</button>
    </div>
    <fieldset id="flexContainerProps">
      <legend>Flex Container Props</legend>
      <label for="flexDirection">flex-direction</label>
      <select id="flexDirection">
        <option value="row" selected>row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>

      <label for="flexWrap">flex-wrap</label>
      <select id="flexWrap">
        <option value="nowrap">nowrap</option>
        <option value="wrap" selected>wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>

      <label for="justifyContent">justify-content</label>
      <select id="justifyContent">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>

      <label for="alignItems">align-items</label>
      <select id="alignItems">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>

      <label for="alignContent">align-content</label>
      <select id="alignContent">
        <option value="flex-start" selected>flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>
    </fieldset>

    <fieldset id="flexItemProps">
      <legend>Flex Item Props</legend>
      <label for="order">order</label>
      <input
        id="order"
        type="number"
        min="-5"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexGrow">flex-grow</label>
      <input
        id="flexGrow"
        type="number"
        min="0"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexShrink">flex-shrink</label>
      <input
        id="flexShrink"
        type="number"
        min="1"
        max="6"
        step="1"
        value="1"
      />

      <label for="alignSelf">align-self</label>
      <select id="alignSelf">
        <option value="auto" selected>auto</option>
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>
    </fieldset>
  </div>

  <div id="flexContainer">
    <div class="flex-item selected">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
  </div>
</main>

ここには、6つのフレックスアイテムを備えたflexContainerと、flexContainerPropsのプロパティと選択したflexItemPropsのプロパティ間の切り替えを制御するコントロールがあります。また、2番目のコンテナには2つのボタンがあります。1つはフレックスコンテナに要素を追加するためのもの（addBtn）で、もう1つは最後のフレックス要素を削除するためのもの（removeBtn）です。

スタイル

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

#controls {
  margin-right: 0.4rem;
}

#buttons {
  margin: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  margin: 0.2rem;
}

label {
  display: block;
  margin: 0.4rem;
}

select {
  width: 100%;
}

#flexContainer {
  width: 600px;
  height: 600px;
  border: 1px dashed #222;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  min-width: 178px;
  min-height: 178px;
  background: radial-gradient(circle, yellow, orange);
  border: 1px solid #222;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #222;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.flex-item:nth-child(2n) {
  min-width: 158px;
  min-height: 158px;
}

.flex-item:nth-child(3n) {
  min-width: 198px;
  min-height: 198px;
}

.flex-item.selected {
  background: radial-gradient(circle, lightgreen, darkgreen);
}

フレックス要素は、サイズが異なり、同時に柔軟性がある必要があります。これは、min-width / min-heightおよびnth-childで実現します。選択されたアイテムは、異なる背景色でクラス「選択済み」です。

脚本

//    
const controls = document.querySelector('#controls')
const buttons = document.querySelector('#buttons')
const flexContainer = document.querySelector('#flexContainer')

//   
buttons.addEventListener('click', (e) => {
  //     
  if (e.target.tagName !== 'BUTTON') return

  //   
  const { btn } = e.target.dataset

  switch (btn) {
    //        -
    case 'addBtn':
      //     6 
      //      -
      //    
      const num = document.querySelectorAll('.flex-item').length + 1
      // ,      7 
      //   
      if (num < 7) {
        //    "div"
        const newItem = document.createElement('div')
        //    
        newItem.className = 'flex-item'
        //  
        newItem.textContent = num
        //    -
        flexContainer.append(newItem)
      }
      break
    //      -
    case 'removeBtn':
      //    
      const index = document.querySelectorAll('.flex-item').length - 1
      // ,      0
      //      -
      if (index > 0) {
        //  ,  
        const itemToRemove = document.querySelectorAll('.flex-item')[index]
        //   
        itemToRemove.remove()
      }
      break
  }
})

//     
controls.addEventListener('change', (e) => {
  //    
  const prop = e.target.id
  //    
  const value = e.target.value

  // ,   
  //  -    -
  //      
  if (e.target.parentElement.id === 'flexContainerProps') {
    flexContainer.style[prop] = value
  } else {
    const selectedItem = document.querySelector('.selected')
    selectedItem.style[prop] = value
  }
})

//   -
flexContainer.addEventListener('click', (e) => {
  //        -
  if (
    e.target.className !== 'flex-item' ||
    e.target.classList.contains('selected')
  )
    return

  //     "selected"    
  if (document.querySelector('.selected') !== null)
    document.querySelector('.selected').classList.remove('selected')

  //      
  e.target.classList.add('selected')

  //   -      "-"
  //       
  //      -
  //    
  //   ,     

  //         
  //         -
  const getStyle = (property, element = e.target) =>
    getComputedStyle(element).getPropertyValue(property)

  //  ,      DOM-,   "id", 
  //  ,     
  order.value = getStyle('order')
  flexGrow.value = getStyle('flex-grow')
  flexShrink.value = getStyle('flex-shrink')
  alignSelf.value = getStyle('align-self')
})

ご覧のとおり、複雑なことは何もありません。もちろん、結果のシミュレーターの機能は非常に制限されています。ただし、Flexboxの基本的なプロパティがどのように機能するかを理解するにはこれで十分だと思います。



グリッドの基本的なプロパティに基づいて同様のシミュレーターを作成することをお勧めします。これは優れた方法であり、すべてを正しく理解できるようになります。







私の最近のプロジェクトの1つであるModernHTML StarterTemplateも興味深いかもしれません。



ご清聴ありがとうございました。良い一日を。