如何建立具有固定寬度側列和靈活中心列的三列 Flexbox 佈局？

維護具有靈活中心的固定寬度列

您正在尋求設計一個具有三列的Flexbox 佈局，其中左列和右列保持固定寬度，而中心列擴展以佔據剩餘空間。儘管設定了列的尺寸，但它們會隨著視窗大小的調整而收縮。

解決方案

要實現所需的佈局，請將width 屬性替換為以下flex 規範對於固定寬度的列：

flex: 0 0 230px;

此規範表示：

• 0 表示flex-grow：不展開列。
• 0 表示 flex-shrink：不壓縮列。
• 230px 表示 flex -basis：設定初始寬度為230px。

本質上，這個配置確保了無論視窗大小如何，列都保持在 230px。

附加功能

關於根據用戶交互隱藏右側列同時保持固定寬度的附加要求左列並相應地擴展中心列，您可以合併以下內容：

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

此修改確保當右列列被隱藏，中心列填滿剩餘空間，而左列保持固定在230px。

以上是如何建立具有固定寬度側列和靈活中心列的三列 Flexbox 佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！