.accessibility-tools fieldset { 幅：48％; フロート：左; マージン右：1％; } /* 攜帯 */ @mediaのみの畫面と（max-width：480px）{ .accessibility-tools fieldset { 幅：100％; } }

ただし、小さな畫面では、垂直方向の不整合が明らかになります。固定された幅では、メディアクエリを使用したピクセルベースのCSSソリューションはアライメントを強制することができますが、このアプローチには柔軟性がなく、特定のコンテンツに関連する「マジック番號」に依存しています。

 /* 攜帯 */
@mediaのみの畫面と（max-width：480px）{
  伝説 {
    幅：160px;
  }
  ボタン {
    幅：130px;
  }
}

この柔軟性は、メディアクエリ（私が最小限に抑えることを目指している）に依存しているため、より適応性のあるソリューションを必要とします。理想的なソリューションでは、ボタンとラベルが応答できるようにする必要があります。

1. 利用可能なスペース
2. コンテンツの寸法
3. 周囲の要素

ヘイドン?ピカリングの「The Flexbox Holy Albatross」に示されているように、メディアのクエリは周囲の空間を考慮していないため不足しています。望ましい動作は2番目の動作です<fieldset></fieldset>両方のフィールドセットが単一の行に適合しなくなった場合にのみラップします。

フレックスボックスとグリッド：初期試行

FlexBoxは、 flex-wrap: wrap Propertyを備えた柔軟性を向上させ、要素が複數(shù)のラインに流れるようにします。ただし、完全な垂直アライメントのためには、多くの場合、 min-widthが必要です。

レイアウト管理用に設(shè)計されたCSSグリッドは、メディアクエリのないマルチラインレイアウトのauto-fitおよびauto-fillキーワード（ repeat()內(nèi)）を提供します。 auto-fitを使用して、次のことを達成します。

 .wrapper  -  accessibility-tools {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（auto-fit、450px）;
  グリッドギャップ：10px;
}

ただし、最適なアライメントには、絶対幅の値が必要になる場合があります。 frユニットまたはminmax()を使用した柔軟なグリッドトラックはさらに改善されますが、グリッドコンテナの直接の子供のみがグリッドアイテムと見なされるため、制限が生じます。

サブグリッドソリューション

CSSグリッドレベル2では、 subgridを?qū)毪贰ⅴ庭攻趣丹欷骏哎辚氓嗓Hからトラックサイジングを継承できるようにします。これにより、獨立したネストされたグリッドの問題が解決します。 Subgridを使用すると、子グリッドの要素が兄弟グリッドのコンテンツに応答することができます。

ボタンの例では、親グリッドはauto-fillとminmax()を使用して定義されます。

 .wrapper  -  accessibility-tools {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（auto-fill、minmax（150px、1fr））;
  グリッドギャップ：10px;
}

子グリッドはsubgridを使用して、親の列トラックを継承します。

 .sub-grid {
  ディスプレイ：グリッド;
  グリッドコラム：スパン3;
  Grid-Template-Columns：subgrid;
  Align-Items：Center;
}

これにより、一貫したアライメントと応答性のある動作が保証されます。ボタンとラベルは、利用可能なスペースに適応し、必要な場合にのみ新しいラインに包みます。

ブラウザの互換性とさらなる読み取り

現(xiàn)在、サブグリッドブラウザーのサポートは限られています（主にFirefox）。 CSS機能クエリは、他のブラウザにフォールバックを提供できます。詳細(xì)なブラウザの互換性情報については、caniuse.comを參照してください。このトピックについてさらに読むことには、ミリアム?スザンヌ、レイチェル?アンドリュー、ヘイドン?ピカリングによる記事（元の記事で提供されているリンク）が含まれています。フォーム要素、グリッド、およびフレックスボックスを含むバグを処理するには、フィールドセットの周りのラッパーが必要になる場合があります。 Fieldsetのdisplayプロパティは、これに対処するためにcontentsに設(shè)定できます。

以上が垂直アライメントの達成（ありがとう、サブグリッド?。─卧敿?xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。