创建相等宽度的弹性项目

Question

我使用flex进行布局，但浏览器不会在项目之间平均分配宽度。

 .parent { display: flex; width: 200px; } .btn1 { flex: 1 1 auto; } 

 <div class="parent"> <div class="btn1"> <button align="left" style="width:100%">Ok</button> </div> <button align="left" class="btn1">Cancel</button> <div> 

现在，我希望按钮将容器长度分成50％/ 50％。

但那不是正在发生的事情。 我尝试使用flex: 1 1 auto和flex: 1 1 0但没有成功。

我知道我可以直接使用OK按钮，它将解决我的问题，但在我的特定情况下，用div包装它是很重要的。

现在，据我所知，flex应该能够均匀地扩展宽度，这就是我的目标。

还有一件事，我注意到按钮内容似乎对宽度有影响，我想以某种方式忽略这种效果。

谢谢！

JSFiddle示例： https ：//jsfiddle.net/edismutko/cvytLkyp/3/

Answer 1

flex-basis: auto vs flex-basis: 0

您正在使用flex: 1 1 auto调整您的Flex项目flex: 1 1 auto 。

但是，如果要在项目之间均匀分配空间，则需要使用flex: 1 1 0 。

不同之处在于基于flex-basis组件。

使用flex-basis: 0 ，每个项目被认为具有零宽度， flex-grow在它们之间平均分配容器空间。 这导致所有项目具有相同的长度。

使用flex-basis: auto ，项目的大小被计入flex-grow计算中，容器空间按比例分配在项目中。

所以当你想要相等长度的项目时，使用flex: 1 1 0 ，这与flex: 1相同。

以下是更详细的说明： 根据原始大小灵活扩展项目

---

button元素的默认规则

默认情况下，浏览器将样式应用于元素。 例如，Chrome会向button元素添加填充和边框宽度。

重置这些默认值。

现在您有两个相等宽度的弹性项目。 （额外的造型取决于你。）

 .parent { display: flex; width: 200px; } .btn1 { flex: 1; } button { padding: 1px 0; border-left-width: 0; border-right-width: 0; } 

 <div class="parent"> <div class="btn1"> <button align="left" style="width:100%">Ok</button> </div> <button align="left" class="btn1">Cancel</button> <div> 

---

box-sizing: border-box

要考虑的其他因素包括width / flex-basis计算中的填充和边框长度。 为什么边框导致div溢出容器？