我怎样才能有两个固定宽度的列，中间有一个灵活的列？

您可以使用 flex: 0 0 230px; 而不是使用 width（这是使用 flexbox 时的建议），这意味着：

= 不增长（flex-grow 的简写）

0 = 不收缩（flex-shrink 的简写）

230px = 从 230px 开始（flex-basis 的简写）

这意味着：始终为 230px。

See fiddle，谢谢@TylerH

哦，这里不需要 justify-content 和 align-items。

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

---

尽管为列设置了尺寸，但它们似乎仍然随着窗口的缩小而缩小。

弹性容器的初始设置是 flex-shrink: 1。这就是您的列正在缩小的原因。

您指定的宽度 (it could be width: 10000px) 无关紧要，使用 flex-shrink 可以忽略指定的宽度并防止弹性项目溢出容器。

我正在尝试设置一个具有 3 列的 flexbox，其中左列和右列具有固定的宽度...

您将需要禁用收缩。以下是一些选项：

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

或者

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

或者，按照规范的建议：

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2.灵活性的组件 鼓励作者使用 flex 简写而不是直接使用其简写属性来控制灵活性，因为简写会正确重置任何未指定的组件以适应常见用途。

更多详细信息：What are the differences between flex-basis and width?

我需要做的另一件事是根据用户交互隐藏右列，在这种情况下，左列仍将保持其固定宽度，但中心列将填充其余空间。

尝试这个：

.center { flex: 1; }

这将允许中心列消耗可用空间，包括其兄弟姐妹被移除时的空间。

Revised Fiddle

---

与旧浏览器的兼容性可能会很麻烦，因此请注意。

如果这不是问题，请继续。运行代码段。转到整页视图并调整大小。 Center 将自行调整大小，而不会更改左侧或右侧 div。

更改左右值以满足您的要求。

谢谢你。

希望这可以帮助。

#container { 显示：弹性； } .column.left { 宽度：100px;弹性：0 0 100 像素； } .column.right { 宽度：100px;弹性：0 0 100 像素； } .column.center { 弹性：1；文本对齐：居中； } .column.left, .column.right { 背景：橙色；文本对齐：居中； }

---

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

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

.column.center {
    border-left: 1px solid #eee;
}

---