如何建立具有固定寬度外列的三列 Flexbox 佈局？

具有固定寬度外列的三列 Flexbox 佈局

您正在嘗試建立具有固定寬度外列和靈活中心的三列 Flexbox 佈局柱。儘管定義了這些列的尺寸，但它們似乎隨著視窗變窄而縮小。

解

此版面的關鍵是利用 Flex 而不是寬度。將width 替換為CSS 中的flex 屬性：

#container {
  display: flex;
}

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

以下是flex 屬性中每個值的意義：

• 0 代表flex-grow：這可以防止列增長超出其初始寬度。
• 0 用於 flex-shrink：這可以防止列縮到低於其初始寬度width。
• 230px for flex-basis：這將列的初始寬度設為 230px。

透過設定這些屬性，您可以為將保留的外部列定義固定尺寸即使視窗發生變化也保持不變。

附加說明

對於隱藏右側的可選要求列，只需將.column.right 的display 屬性設為none：

.column.right {
  display: none;
}

這將隱藏右列，同時保留左列的固定寬度和中心列的彈性寬度。

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