html - 创建等宽 flex 元素

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 与 flex-basis: 0

您正在使用 flex: 1 1 auto 调整 flex 元素的大小。

但是，如果你想在元素之间平均分配空间，你需要使用 flex: 1 1 0。

区别在于 flex-basis 组件。

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

使用 flex-basis: auto，元素的大小被纳入 flex-grow 计算，容器空间按比例分配在元素之间。

因此，当您想要等长元素时，请使用 flex: 1 1 0，这与 flex: 1 相同。

这里有更详细的解释:Make flex-grow expand items based on their original size

---

button 元素的默认规则

浏览器默认将样式应用于元素。例如，Chrome 向 button 元素添加了内边距和边框宽度。

重置这些默认值。

现在你有两个等宽的 flex 元素。 (其他样式由您决定。)

.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 计算中包括填充和边框长度。 Why are borders causing div to overflow container?