Question

我想推出元素，以便在使用flex时隐藏它们。

例如，如果flex-basis为50％，则只显示两个项目已弯曲到给定空间，而其他元素位于overflow:hidden;区域内。

或者，如果flex-basis为25％，则仅显示4个flex元素并隐藏其他元素。

这可能吗？

.bargraph {
  display: flex;
  overflow: hidden;
  background: red;
}
.bargraph>dt {
  flex-basis: 50%;
}

<dl class="bargraph">
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
</dl>

https://jsfiddle.net/sffo02dp/

Answer 1

除了flex-grow之外，还可以使用flex-shrink和flex-grow: 0属性来控制大小调整。

更具体地说：

flex-shrink: 0
flex-basis: 50%
flex（或任何你想要的）

这告诉flex项目：不增长，不缩小，是固定的百分比宽度

您可以使用flex: 0 0 50%; /* two items will show, OR... */ flex: 0 0 25% /* four items will show, OR... */ flex: 0 0 20% /* five items will show */简写属性将所有这些属性合并为一个规则：

.bargraph {
  display: flex;
  overflow: hidden;
  background: red;
}
.bargraph>dt {
  flex: 0 0 50%;
}

这是完整的代码：

<dl class="bargraph">
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
  <dt>test</dt>
</dl>

EditorFor

Revised Fiddle

Answer 2

您可以尝试在CSS文件中使用它

bargraph>dt{
 min-width: 10em;
}

这应该是一个不错的选择，您可以根据父宽度设置值。

希望这有帮助

保重和快乐编码..

使用flex-basis来控制线上显示的项目数

2 个答案: