ホームページ > ウェブフロントエンド > CSSチュートリアル > フレックスボックスを使用して、固定幅の側列を備えた柔軟な中央列を作成するにはどうすればよいですか?

フレックスボックスを使用して、固定幅の側列を備えた柔軟な中央列を作成するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-04 08:23:12
オリジナル
566 人が閲覧しました

How Can I Create a Flexible Center Column with Fixed-Width Side Columns Using Flexbox?

フレックスボックス レイアウトで柔軟な中央列を備えた固定幅の列を実現する

フレックスボックス レイアウトでは、列の幅と柔軟性を管理するのが難しい場合があります。この記事では、固定幅の左右の列を維持しながら、中央の列を柔軟にして利用可能なスペースを埋めることができるようにするという一般的な問題について説明します。

固定幅 Co のフレックスボックス

固定幅の列を作成するには、width プロパティの使用を避けてください。これにより、不要な縮小が発生する可能性があります。代わりに、flex-grow、flex-shrink、および flex-basis の特定の値を指定した flex 短縮構文を使用します。例:

.fixed-column {
  flex: 0 0 230px; /* Don't grow, don't shrink, start at 230px */
}
ログイン後にコピー

中央列の変更

中央列の柔軟性により、ウィンドウ サイズに基づいて拡張または縮小できます。 flex プロパティを 1 (またはゼロ以外の値) に設定すると、固定幅の列の後の残りのスペースが占有されます。

.flex-column {
  flex: 1 1 0; /* Grow, don't shrink, start at 0px */
}
ログイン後にコピー

応答性の非表示/表示

左の列の幅や中央の列の柔軟性に影響を与えずに右の列を非表示にするには、CSS メディア クエリまたは JavaScript を使用して、可視性を切り替えます。例:

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}
ログイン後にコピー

完全なコード例

上記の調整を組み合わせると、完全なコード スニペットは次のようになります。

.fixed-column {
  flex: 0 0 230px;
}

.flex-column {
  flex: 1 1 0;
}

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}
ログイン後にコピー

Byこれらのテクニックを実装すると、固定幅の列とウィンドウ サイズとユーザーに適応する動的な中央列を備えた柔軟なフレックスボックス レイアウトを効果的に実現できます。インタラクション。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート