中央の列を柔軟にしながらサイドの列を固定幅に維持するにはどうすればよいですか?

柔軟な中央列を使用して固定幅の列を確保する

柔軟な Web レイアウトを追求する場合、多くの場合、2 つの列を固定することが望ましいです。幅を動的に調整する中央列を備えた幅列。ただし、ブラウザ ウィンドウが縮小すると固定列が縮小するという問題がユーザーによく発生します。

これに対処するには、固定列で幅プロパティを指定しないことが重要です。代わりに、フレックスボックスの特殊なプロパティを使用して列の動作を制御します。

推奨されるアプローチは、flex: 0 0 230px; を使用することです。左列と右列の両方に。これにより、これらの列の幅を 230 ピクセルの固定幅に維持するようブラウザに指示され、ウィンドウ サイズに関係なく列が一定のままになります。

flex: 0 0 230px; 3 つの部分に分解します:

• 0 は成長なし (flex-grow) を意味します
• 0 は縮小なし (flex-shrink) を意味します
• 230px は初期および固定を指定しますwidth (フレックスベース)

さらに、次のことが可能です。フレックスボックスの CSS 順序プロパティを使用して、適切な列を応答的に非表示にします。これにより、中央の列が、非表示の右側の列によって作成された空きスペースを埋めることができ、柔軟な動作が維持されます。

以上が中央の列を柔軟にしながらサイドの列を固定幅に維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。