Html 我怎么能有两个固定宽度的柱子，中间有一个灵活的柱子？

我正在尝试设置一个包含三列的flexbox布局，其中左列和右列具有固定的宽度，中间列弯曲以填充可用空间

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

有人知道如何做到这一点吗

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

#容器{
显示器：flex；
证明内容：周围的空间；
对齐项目：拉伸；
最大宽度：1200px；
}
.左栏{
宽度：230px；
}
.column.right{
宽度：230px；
左边框：1px实心#eee；
}
.圆柱中心{
左边框：1px实心#eee；
}

《焦虑》是一个博客系列，于2012年1月至2013年7月在《纽约时报》舆论版上发表。它以各种各样的贡献者的散文、小说和艺术为特色，从科学、文学和艺术的角度探讨焦虑

巴林特扎科酒店

有人在敲我的门

01.12.13

您可以使用

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


0
=不增长（flex-grow的缩写）
0
=不要收缩（flex-shrink的缩写）
230px
=从
230px
开始（缩写为
flex basis
）

这意味着：始终是
230px

，谢谢@TylerH

哦，您不需要在此处使用
对齐内容
和
对齐项目

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-shrink
可以忽略指定的宽度，并防止flex项溢出容器

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

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

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

或

或者，按照规范的建议：

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


鼓励作者使用
flex
速记控制灵活性
而不是直接用它的速记属性，如速记
正确重置任何未指定的组件以适应

详情如下：

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

试试这个：

.center { flex: 1; }

这将允许中心柱占用可用空间，包括删除其同级柱时的空间

与旧浏览器的兼容性可能是一个阻力，因此请注意

如果这不是问题，那就去吧。
运行代码段。转到全页视图并调整大小。中心将自行调整大小，而不更改左或右div

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

多谢各位

希望这有帮助


#容器{
显示器：flex；
}
.左栏{
宽度：100px；
flex:0100px；
}
.column.right{
宽度：100px；
flex:0100px；
}
.圆柱中心{
弹性：1；
文本对齐：居中；
}
.column.left，
.column.right{
背景：橙色；
文本对齐：居中；
}

这是左边
这是中心
这是对的
在当前的实现中（至少在Chrome中），您还需要确保中间的列定义了
flex grow
（比如1）。为什么只是宽度不起作用？我需要flex:0230px<代码>flex grow:1仍然需要用于Chrome 53中的液柱。否则，它不会占用剩余的宽度。我想答案应该考虑这个事实。对于任何人仍然困惑，<代码> Flex：0 0 200 px < /代码>与<代码>宽度：200 px相同；flex-shrink:0

。我已经在这里复制了小提琴，以防Rudie丢失：添加

flex:1到中心
div
就足够了，谢谢。
.center { flex: 1; }