如何在保持中心列靈活的同時保持固定寬度的側列？

確保固定寬度的列和靈活的中心列

在追求靈活的網頁佈局時，通常需要有兩個固定的-寬度列，中心列可動態調整其寬度。但是，使用者通常會遇到固定列隨著瀏覽器視窗縮小而縮小的問題。

要解決此問題，避免在固定列上指定寬度屬性至關重要。相反，使用 flexbox 的專用屬性來控制列的行為。

首選方法是使用 flex: 0 0 230px;對於左列和右列。這指示瀏覽器為這些列維持 230px 的固定寬度，確保無論視窗大小如何，它們都保持不變。

flex: 0 0 230px;解構為三個部分：

• 0 表示不成長（flex-grow）
• 0 表示不收縮（flex-shrink）
• 230px 指定初始和固定width (flex-basis)

此外，還可以隱藏使用 Flexbox 的 CSS order 屬性響應式右邊列。這允許中心列填充隱藏的右列所建立的空白空間，保持靈活的行為。

以上是如何在保持中心列靈活的同時保持固定寬度的側列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！