固定幅のサイド列とフレキシブルなセンター列を備えた 3 列のフレックスボックス レイアウトを作成するにはどうすればよいですか?

柔軟な中央で固定幅の列を維持する

3 つの列で、左右の列が維持されるフレックスボックス レイアウトを設計しようとしています。幅は固定され、中央の列は残りのスペースを占めるように拡張されます。列の寸法を設定しているにもかかわらず、ウィンドウ サイズが調整されると、列が望ましくなく縮小します。

解決策

希望のレイアウトを実現するには、width プロパティを次のフレックス仕様に置き換えます。固定幅列の場合:

flex: 0 0 230px;

この仕様意味:

• 0 (flex-grow): 列を拡張しません。
• 0 (flex-shrink): 列を圧縮しません。
• 230px (flex) -basis: 初期幅を 230px に設定します。

In本質的に、この構成により、ウィンドウ サイズに関係なく列が 230 ピクセルのままになることが保証されます。

追加機能

ユーザーの操作に基づいて適切な列を非表示にする追加要件について、左側の列の固定幅を維持し、それに応じて中央の列を拡張しながら、次の内容を組み込むことができます:

.column.center {
  flex: 1 0 calc(100% - 230px);
}

この変更右の列が非表示の場合、左の列は 230 ピクセルに固定されたままで、中央の列が残りのスペースを埋めるようにします。

以上が固定幅のサイド列とフレキシブルなセンター列を備えた 3 列のフレックスボックス レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。