如何创建具有固定宽度外列的三列 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中文网其他相关文章！