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

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-basis ，还可以使用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> 

修改小提琴

Answer 2

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

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

这应该是一个很好的选择，您可以根据父宽度放置值。

希望这可以帮助

保重和快乐编码..