フレックスボックスを使用して柔軟な中心を持つ固定幅の列を作成するにはどうすればよいですか?

Flexbox を使用して固定幅の列と柔軟な中央を実現する

Web 開発では、多くの場合、固定幅と柔軟な幅を組み合わせてレイアウトを作成する必要があります。幅の列。 Flexbox は、この配置を実現するための便利なソリューションを提供します。

中央が柔軟な固定幅の列を目指す場合、課題は、ウィンドウ サイズの変化に応じて固定幅の列が縮小しないようにすることです。フレックスボックスでのスケーリングの影響を受ける幅プロパティに依存する代わりに、推奨されるアプローチは、flex-grow、flex-shrink、および flex-basis の組み合わせを使用することです。

たとえば、次のことを考慮してください。コード:

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

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

このコードでは、flex プロパティは 3 つで構成されます。値:

• flex-grow: 0 (つまり、拡大しません)
• flex-shrink: 0 (つまり、縮小しません)
• flex -basis: 230px (つまり、開始位置) 230px)

これにより、左右の列の両方が常に 230px の固定幅を維持することが効果的に保証されます。

さらに、justify-content プロパティと align-items プロパティが指定されていることにも注意してください。デフォルト値は目的の動作と一致するため、このシナリオでは省略できます。

適切なシナリオを処理するには列を非表示にする必要がある場合、可視性に影響しないため、flex プロパティは変わりません。代わりに、JavaScript または次のような CSS テクニックを使用して表示/非表示を切り替えることができます。

#container {
    display: flex;
    max-width: 1200px;
}

.column.right {
    flex: 0 0 230px;
    border-left: 1px solid #eee;
    visibility: hidden;
}

結論として、flex-grow、flex-shrink、および flex-basis を使用することで、固定のフレックスボックス レイアウトを作成できます。利用可能なスペースに適応する柔軟な中心を維持しながら、列の幅を調整します。

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