CSSアダプティブレイアウトは、サブ要素項目の全体的な中央揃えと内部項目の左揃えを実現します。

日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応じて幅が調整されます) に多数のボタンが含まれ、これらのボタン (固定幅) を親要素の中央に配置する必要があり、ボタンの全体的なコンテンツは左から右に配置されるというものです。解決策は次のとおりです。

次のコードがあります:

<div class="wrap">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn">7</button>
</div>

対応する CSS は次のとおりです。

。包む {
    境界線: 2px 黒一色;
    マージン: 0 自動;
    パディング: 10px;
    幅: 40%;
}
.btn{
    アウトライン: なし;
    境界線: なし;
    幅: 180ピクセル;
    高さ: 30px;
    背景色: コーンフラワーブルー;
    マージン: 5px;
}

表示効果:

動的に変化する幅:

ご覧のとおり、ブラウザ ウィンドウのサイズを縮小すると、親要素 (黒いボックス) の幅が動的に調整され、その子要素も親要素の幅に応じて動的に配置されます。ただし、ボタン グループは親コンテナー内で左揃えになっています。全体を中央揃えにしたい場合は、次のようにします。

CSSコード:

。包む {
    境界線: 2px 黒一色;
    マージン: 0 自動;
    パディング: 10px;
    幅: 40%;
    表示: グリッド;
    グリッドテンプレート列: repeat(自動入力、200px);
    コンテンツの中央揃え: 中央;
}
.btn{
    アウトライン: なし;
    境界線: なし;
    幅: 180ピクセル;
    高さ: 30px;
    背景色: コーンフラワーブルー;
    マージン: 5px;
}

親要素のdisplayプロパティをgridに設定し、グリッド列テンプレートを auto-fill に設定し、幅を200pxに設定し (ここでの幅は、単一のボタン要素よりもわずかに大きくすることができます)、 justify-contentプロパティ値をcenterに設定して、コンテンツを水平方向に中央揃えにします。効果は以下のとおりです。

動的に変化する効果:

幅の変更プロセス中、サブ要素全体が常に中央に留まっていることがわかります。

CSSだけでこの効果を実現するには、グリッドを使うことしか思いつきませんでした。他の方法があれば、ぜひメッセージを残して一緒に学んでくださいね〜

ヒント: グリッドの互換性は現時点ではあまり良くありません。古いバージョンのブラウザをサポートする必要がある場合は、注意して使用してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。