创建等宽的弹性项目

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 autoandflex: 1 1 0但没有成功。

我知道我可以直接使用“确定”按钮，它将解决我的问题，但在我的特定场景中，用 div 包裹它很重要。

现在，据我了解，flex 应该能够均匀地分布宽度，这就是我的目标。

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

谢谢！

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

Answer 1

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

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

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 溢出容器？