创建相等宽度的弹性项目

Question

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

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

flex: 1 1 auto

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

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

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

现在，据我所知，flex应该能够平均分布宽度，这就是我的目标。

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

谢谢！

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

Answer 1

flex-basis: auto vs flex-basis: 0

您正在使用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与button相同。

以下是更详细的解释：Make flex-grow expand items based on their original size

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

的默认规则

默认情况下，浏览器会将样式应用于元素。例如，Chrome会将填充和边框宽度添加到<div class="parent"> <div class="btn1"> <button align="left" style="width:100%">Ok</button> </div> <button align="left" class="btn1">Cancel</button> <div>元素。

重置这些默认值。

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

＆＃13;

＆＃13;

box-sizing: border-box

＆＃13;

width

＆＃13;

＆＃13;

＆＃13;

flex-basis

要考虑的其他事项包括AllPaths%list_Pw(A,B)%vectors(C)%elements(D, E) / A,B计算中的填充和边框长度。 Why are borders causing div to overflow container?