Html 如何在3列css flex box中创建动态宽度div

我想用flex box制作3列布局。目标是使第一个和最后一个div宽度动态。但是第二个div

max width

是静态的

代码：

文件
html，正文{
最小高度：100%！重要；
身高：100%；
}
身体{
保证金：0；
背景色：#ddd；
显示器：flex；
证明内容：之间的空间；
}
.左、.中、.右{
身高：100%；
}
.左{
宽度：自动；
背景色：仿古白色；
}
.中心{
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
宽度：100%；
最大宽度：1200px；
背景颜色：绿色；
}
.对{
宽度：自动；
背景颜色：蓝色；
}

这有帮助吗

.flex容器{
显示器：flex；
证明内容：之间的空间；
背景色：淡蓝色；
}
.flex容器>.side{
背景颜色：绿色；
宽度：100%；
}
.flex容器>.center{
背景色：#f1f1；
颜色：绿色；
最大宽度：100%；
高度：100px；
}

这将随着内容的增长而扩展

给你

只需将

flex:1

应用于所有div但

flex:100%

到中心div，因此在点击所需的

最大宽度之前，它默认为尽可能宽


html，
身体{
最小高度：100%！重要；
身高：100%；
}
身体{
保证金：0；
背景色：#ddd；
显示器：flex；
}
左边
居中
.对{
弹性：1；
身高：100%；
}
.左{
宽度：自动；
背景颜色：红色
}
.中心{
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
弹性：10100%；
宽度：100%；
最大宽度：1200px；
背景颜色：绿色；
}
.对{
宽度：自动；
背景颜色：蓝色；
}

为了在较小的窗口上进行测试，我将中心列宽从1200px减小到200px，它似乎可以按照您的需要工作。@valangar，对不起，我不想减小中心列宽。它应该是最大1200像素。因此，在1200px之后，左<代码>和右<代码>将以动态宽度显示。抱歉，预期无法工作。。我只需要
侧面的动态宽度
，但想
中间的宽度：100%，最大宽度：1200px
。