Question

我在flexbox中有4列，我希望它们的宽度相等。拥有overflow: hidden的人比其他人占有更多的位置，我无法解决。

在我看来，然后我遇到了与此帖子中所述相同的问题：flexbox and overflow hidden not working properly

但是答案并没有帮助我，我也无法弄清楚我的代码有什么问题。我想我有些想念。

有人可以帮忙吗？

.items {
    display: flex;
    justify-content: space-between;
}

.item {
    flex: 1 0 0;
    border: 1px solid #333;
    background: #fde669;
}

.item-title {
    font-size: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="items">
  <div class="item">
    <div class="item-title">Title 1</div>
  </div>
  <div class="item">
    <div class="item-title">Title 2</div>
  </div>
  <div class="item">
    <div class="item-title">Some very long title</div>
  </div>
  <div class="item">
    <div class="item-title">Title 3</div>
  </div>  
</div>

Answer 1

如果您未指定宽度，则flex容器只是在执行它的工作，并按照指定的速度增长。解决此问题的方法是设置min-width，以确保没有隐式宽度。

此外，这里还有关于flex-basis的一些有价值的信息：MDN

如果为元素设置了flex-basis（非auto）和width（或height（如果是flex-direction：列，则为高度）），则flex-basis具有优先权。

.items {
    display: flex;
    justify-content: space-between;
}

.item {
    flex: 1 0 0;
    border: 1px solid #333;
    background: #fde669;
    min-width: 0;
}

.item-title {
    font-size: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="items">
  <div class="item">
    <div class="item-title">Title 1</div>
  </div>
  <div class="item">
    <div class="item-title">Title 2</div>
  </div>
  <div class="item">
    <div class="item-title">Some very long title</div>
  </div>
  <div class="item">
    <div class="item-title">Title 3</div>
  </div>  
</div>

尽管flex-basis，Flexbox项的宽度也不相等：0

1 个答案: