外側の列が固定幅の 3 列フレックスボックス レイアウトを作成するにはどうすればよいですか?

固定幅の外側列を備えた 3 列のフレックスボックス レイアウト

固定幅の外側の列と柔軟な中央を備えた 3 列のフレックスボックス レイアウトを確立しようとしています。カラム。これらの列の寸法を定義しているにもかかわらず、ビューポートが狭くなるにつれて列が縮小しているように見えます。

解決策

このレイアウトの鍵は、幅ではなくフレックスを利用することです。 width を CSS の flex プロパティに置き換えます:

#container {
  display: flex;
}

.column.left,
.column.right {
  flex: 0 0 230px;
}

flex プロパティの各値が意味するものは次のとおりです:

• flex-grow の場合は 0: これにより、列の拡大が防止されます。
• 0 (フレックスシュリンクの場合): これにより、列が初期幅未満に縮小するのを防ぎます。 width.
• 230px (フレックスベースの場合): これにより、列の初期幅が 230px に設定されます。

これらのプロパティを設定することで、残りの外側の列の固定寸法を定義します。ビューポートが変化しても一定です。

追加メモ

右側の列を非表示にするオプションの要件については、 .column.right の表示プロパティを none に設定するだけです:

.column.right {
  display: none;
}

これにより、左列の固定幅と中央列の柔軟な幅を維持しながら、右列が非表示になります。

以上が外側の列が固定幅の 3 列フレックスボックス レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。