box-flex不均分问题

Posted 2020-08-08 小前端学习

解决box-flex不均等分的问题

我想当你上手css3的时候后一定为他的强大而感到震惊，但是震惊之后带来的一定是苦恼，因为他太TM变态了！

我之所以这么说是因为我今天写box-flex的时候遇到了一个可以让我蛋碎的问题~~~

首先，box-flex是干嘛的？

box-flex可以让某个元素的子元素在剩余空间等分！

真的，这个功能太好了！

但是让人恼火，想要喊fuck的是，他有时候居然不等分！

可以试想，一个用来等分的属性实现不了他自身的功能，这是多么搞笑的事~

好吧，以上都是我发的牢骚！接下来进入主题~

 

---

box-flex的具体功能是：让某个元素的子元素的空余空间等分！

记住是空余空间等分！

例如

<div id="parent">

　　<div id="child1"></div>

　　<div id="child2"></div>

</div>

这个时候给child1和child2加box-flex:1，的确他们是等分的

但是，如果是

<div id="parent">

　　<div id="child1">测试内容</div>

　　<div id="child2"></div>

</div>

这个时候给child1和child2加box-flex:1，他们就不等分了，而是他们的空余空间等分（child1比child2更加长，而这个差值正式“测试内容”这几个字的宽度）

我想你现在知道我要表达的是什么了吧！

那么问题来了！挖掘机技术哪家强！fuck！！！不是这句

我们应该这么解决呢？

---

解决方法：

给child1和child2分别加上width:1%;

就这么简单，OK，搞定了！

接下来我说下我的理解：

这里你给child1和child2添加了宽度，且宽度相同，那么他们的空余空间肯定相同了，而“相同的空余空间”+“相同1%的宽度” = “相同的总体宽度”，所以就等分了