而不是使用width(这是一个建议，当使用flexbox)，你可以使用flex: 0 0 230px;这意味着:

0 =不增长(弹性增长的简写) 0 =不要收缩(flex-shrink的缩写) 230px =从230px开始(弹性基准的缩写)

这意味着:始终是230px。

谢谢@TylerH

哦，这里不需要使用justify-content和align-item。

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容器的初始设置是flex-收缩:这就是为什么你的列变小了。

不管你指定的宽度是什么(可以是width: 10000px)，使用flex-shrink可以忽略指定的宽度，并且可以防止flex项溢出容器。

我试图设置一个flexbox 3列，其中左列和右列有一个固定的宽度…

您需要禁用收缩功能。以下是一些选择:

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

OR

.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. 的组件 灵活性 鼓励作者使用伸缩简写来控制灵活性 而不是直接用它的速记属性 正确地重置任何未指定的组件以适应公共 用途。

这里有更多细节:弹性基准和宽度之间的区别是什么?

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

试试这个:

.center { flex: 1; }

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

修改后的小提琴

与旧浏览器的兼容性可能是一个拖累，所以建议使用。

如果这不是问题，那就继续吧。 运行代码片段。转到全页视图并调整大小。Center将在不改变左右div的情况下自行调整大小。

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

谢谢你！

希望这能有所帮助。

#{容器 显示:flex; ｝ .column。离开{ 宽度:100 px; Flex: 00 100px; ｝ .column。正确的{ 宽度:100 px; Flex: 00 100px; ｝ .column。中心{ flex: 1; text-align:中心; ｝ .column.left, .column。正确的{ 背景:橙色; text-align:中心; ｝ < div id = "容器" > <div class="column left">this is left</div> <div class="列中心">这是中心</div> <div class="column right">这是对的</div> < / div >

.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;
}