CSS 水平方向の中央揃えと最大幅の制限

CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法

最近の仕事で、次のような問題に遭遇しました。

1. 背景

• 1 つの列の内容が変化する、水平方向の 3 列または 2 列のレイアウト。
• コンテンツが少なすぎる場合は、全体を中央に表示する必要があります。
• コンテンツが多すぎる場合は、最大幅に応じて省略する必要があります。

2. 実装のアイデア

コンテナ全体にプロパティを追加する必要があります:

。容器 {
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
}

2.1 flex:1を使用して

前のコードでは、変更される列は flex: 1 または flex: auto に設定されていますが、問題は、これによってコンテナー内の残りのスペースがすべて占有され、コンテンツに応じて自動的に調整されないことです。

2.2 flex: none を設定して達成する

これの問題点は、コンテンツが多すぎると、余分なコンテンツがカバーされないことです。

2.3 プロパティを設定しない

中央のコンテンツが固定されていない場合は、flex 属性を設定しないでください。十分でない場合は、上書きすることを忘れないでください。

.クランプ{
    フレックス: 初期;
}

ここでは none ではなく initial が使用されていることに注意してください。

また、他の列の幅を圧迫しないように注意してください。元々左の列に写真があり、幅も設定されていたのですが、真ん中の列の内容が多すぎたため、写真が圧縮されて変形してしまいました。したがって、画像に min-width 属性が追加されます。

CSS で水平中央揃えと最大幅制限を行う方法についての記事はこれで終わりです。CSS で水平中央揃えと最大幅制限を行う方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。