bootStrap4下d-flexflex-grow-1 无法获取理想宽度的解决方法！

Posted 2021-12-31 wm218

d-flex功能强大，可以实现响应式布局

flex-grow-1 用于设置子元素使用剩下的空间。

但实际运用中存在兼容问题及无法正常的分配宽度问题，现整理解决方法如下：

无法显示设置的宽度：

1 <div class="container d-flex">
2   <div class="bg-primary" style="width:300px;">这是一段文字</div>
3   <div class="bg-success flex-grow-1" >红安大布是红安县民间手工制作的一种纯棉纺织制品。它质地柔软、爽身、手感好、透气性强、无静电现象，经久耐用花色给人以清新的明快美、格律美、朴实美。（清）宣统元年铅印本《黄安乡土志》制造物产中记载：“植物制造一織布擇好花織成寬尺四寸強長四丈強密厚者曰穿布曰家機只自衣少出售也余花織成寬尺二寸強長四丈弱粗疏者爲賣布近多以洋紗爲經棉紗爲緯五十匹爲一捆從前歲出萬余捆售銀十數萬近己銳減”。 1992年出版的《红安县志》中记载：1908年（光绪三十四年）日本水野幸吉所著《汉口》一书中记载：“黄安（今红安）的景庄布（即大布）细密、光洁、温暖，亦复耐久，故无论男女，均用以制衣裳”。红安的一首民谣中“最后一碗饭做军粮，最后一尺布缝军装”描述了红安人民倾其所有支援红军，用红安大布为红军将士制作军服、被单。展现了在革命战争年代，红安人民男将在前方打仗，女将在后方织布送衣的动人情景。建国后，红安的将军们仍然喜欢使用家乡的粗棉大布制作床单、衣服。董必武、李先念、陈锡联、韩先楚、秦基伟等党和国家领导人在北京仍然使用家乡的“红安大布”制作床单等生活用品。红安大布的名称便由此叫开。</div>
4 </div>

现象如图：

解决方法，把flex-grow-1的宽度设置为0px,代码如下：

1 <div class="container d-flex">
2   <div class="bg-primary" style="width:300px;">这是一段文字</div>
3   <div class="bg-success flex-grow-1" style="width:0px;">红安大布是红安县民间手工制作的一种纯棉纺织制品。它质地柔软、爽身、手感好、透气性强、无静电现象，经久耐用花色给人以清新的明快美、格律美、朴实美。（清）宣统元年铅印本《黄安乡土志》制造物产中记载：“植物制造一織布擇好花織成寬尺四寸強長四丈強密厚者曰穿布曰家機只自衣少出售也余花織成寬尺二寸強長四丈弱粗疏者爲賣布近多以洋紗爲經棉紗爲緯五十匹爲一捆從前歲出萬余捆售銀十數萬近己銳減”。 1992年出版的《红安县志》中记载：1908年（光绪三十四年）日本水野幸吉所著《汉口》一书中记载：“黄安（今红安）的景庄布（即大布）细密、光洁、温暖，亦复耐久，故无论男女，均用以制衣裳”。红安的一首民谣中“最后一碗饭做军粮，最后一尺布缝军装”描述了红安人民倾其所有支援红军，用红安大布为红军将士制作军服、被单。展现了在革命战争年代，红安人民男将在前方打仗，女将在后方织布送衣的动人情景。建国后，红安的将军们仍然喜欢使用家乡的粗棉大布制作床单、衣服。董必武、李先念、陈锡联、韩先楚、秦基伟等党和国家领导人在北京仍然使用家乡的“红安大布”制作床单等生活用品。红安大布的名称便由此叫开。</div>
4 </div>

显示效果如下图：

 

这种方式也解决了flex-grow-1 在IE浏览器下无法正常显示的问题

 SO.... 我们的bootStrap样式库内又多了一个修复bug的样式：

1 .flex-grow-1 
2   width: 0px;
3