相关疑难解决方法(0)

我连续有3个按钮,宽度各不相同.我希望它们都能获得相同的宽度以填充行的剩余宽度,因此最宽的仍将比其他宽度更宽等.

你可以在下面看到我尝试用flex做的事情导致所有按钮的宽度相同.我知道flex-grow可以用来按比例增长每个项目,但我无法弄清楚如何让它们与原始大小相关.

您可以在第二行中看到蓝色项目大于其他两个项目.我只想让所有三个人从他们当前的大小平均扩大到填充行.

谢谢

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: 1;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large …

在像这样的dom结构中:

<div id="1">
  <div id="2">
    <div id="3">
    </div>
  </div>
  <div id="4">
    <div id="5">
    </div>
  </div>
</div>

用css指定为:

#1{
  display: flex;
  flex-direction: row;
}
#2, #4{
  flex: 1;
}

只要id 3和5中内容宽度的总和不超过id为1的dom的宽度,id为2和4的div就会均匀分布.

当总和超过宽度时,它们不是均匀分布的,而具有更宽内容的一个将占用更多宽度.即使在这种情况下,如何使用flexbox强制2和4占用均匀宽度？

我不想按百分比使用宽度规格.我想坚持使用flexbox.

所以我有一点HTML:

<div class="flex">
  <div class="red">
    <div class="example">
      <div class="wide">
      </div>
    </div>    
  </div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="indigo"></div>
</div>

<div class="flex">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="indigo"></div>
</div>

我的CSS:

.flex {
  display: -webkit-box;
  display: flex;

  height: 100px;
  width: 100%;
}

.flex > div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;

  margin: 15px;
}

.example {
  overflow: hidden;
  width: 100%;
  border: 1px solid black;
}

.example .wide …

我正在尝试创建一个 CSS 类，该类应该占用 flex-container 的剩余空间，而不管 flex-items 的数量。这意味着固定百分比width或flex-basis不是一个选项。

根据这个答案，应用.flex-item { flex-grow: 1; flex-basis: 0; }应该可以解决问题，但正如您在此处看到的，当某些项目具有填充或边框时，即使将 box-sizing 设置为 border-box，它也不起作用。

这是错误还是期望的行为？是否可以为任意数量的 flex 项目指定相等的宽度，而不管填充和边框如何？