Html 如何创建左侧和右侧的固定宽度元素，使其中心填充其余部分？

对于纯CSS，我想知道如何在容器的侧面创建两个固定宽度的元素，并使用一个填充剩余空间的中心元素，如下所示：

“播放”和“全屏”图标以固定宽度附着在容器的侧面，但中间元素（在两个按钮之间缩放的红色条）应填充剩余空间。这似乎很难

上有一个相关的流行问题，说明了这一点，除了一侧只有一个固定宽度的元素外：

---

如何做到这一点？

柔性箱技术适合解决这个问题

将父容器设置为柔性框。 使用flex:0 100px将左右元素定位为具有固定宽度 使用flex:1 auto使中心元素具有灵活的宽度 在此处了解有关属性的更多信息：

检查浏览器兼容性表：

* { 保证金：0； 填充：0； } .集装箱{ 显示器：flex； flex-flow：行nowrap； } 左边 .对{ 背景：浅蓝色； 弹性收缩：0； /*不要退缩*/ flex-grow:0； /*不要长大*/ 弹性基准：100px； /*将100px设置为固定宽度*/ /*flex:1自动；上述三个属性的缩写*/ 文本对齐：居中； } .中心{ 背景：番茄； 颜色：fff； 弹性收缩：1； /*调整大小时收缩*/ 柔性生长：1； /*调整大小时增长*/ 弹性基础：自动； /*自动宽度*/ /*flex:1自动；上述三个属性的缩写*/ 文本对齐：居中； } 左边 居中 正当

---

柔性箱技术适用于这一问题

将父容器设置为柔性框。 使用flex:0 100px将左右元素定位为具有固定宽度 使用flex:1 auto使中心元素具有灵活的宽度 在此处了解有关属性的更多信息：

检查浏览器兼容性表：

* { 保证金：0； 填充：0； } .集装箱{ 显示器：flex； flex-flow：行nowrap； } 左边 .对{ 背景：浅蓝色； 弹性收缩：0； /*不要退缩*/ flex-grow:0； /*不要长大*/ 弹性基准：100px； /*将100px设置为固定宽度*/ /*flex:1自动；上述三个属性的缩写*/ 文本对齐：居中； } .中心{ 背景：番茄； 颜色：fff； 弹性收缩：1； /*调整大小时收缩*/ 柔性生长：1； /*调整大小时增长*/ 弹性基础：自动； /*自动宽度*/ /*flex:1自动；上述三个属性的缩写*/ 文本对齐：居中； } 左边 居中 正当 您可以像这样使用calc：

* { 保证金：0； 填充：0； } .包裹{ 宽度：100%； } .一{ 宽度：100px； 背景：红色； 浮动：左； } .二{ 宽度：calc100%-200px； 背景：绿色； 浮动：左； } 左侧部分 中段 右侧部分 您可以像这样使用calc：

* { 保证金：0； 填充：0； } .包裹{ 宽度：100%； } .一{ 宽度：100px； 背景：红色； 浮动：左； } .二{ 宽度：calc100%-200px； 背景：绿色； 浮动：左； } 左侧部分 中段 右侧部分