4.7 等宽变换

使用.flex-grow-*切换弹性项目的增长以填充可用空间。在下面的案例中,使用.flex-grow-1元素可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。

【例4.8】等宽变换案例。

在IE 11浏览器中运行结果如图4-8所示。

图4-8 等宽变换效果

等宽变换布局也可以添加响应式的设置,响应式类如下: