使用flex-basis来控制线上显示的项目数量 [英] Using flex-basis to control the number of items displayed on the line

问题描述

例如，如果 flex-basis

$ c>为50％，只显示两个项目，而其他元素位于 overflow：hidden; 地域。

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

这可能吗？

.bargraph {display：flex;溢出：隐藏; background：red;} .bargraph> dt {flex-basis：50％;}

 < dl class =bargraph> <峰; dt>试验< / DT> <峰; dt>试验< / DT> <峰; dt>试验< / DT> <峰; dt>试验< / DT> <峰; dt>试验< / DT> < dt> test< / dt>< / dl>  

$ b

https://jsfiddle.net/sffo02dp/

flex-basis 之外，还可以使用 flex-grow 和 flex-shrink 属性来控制大小。 更具体地说：

• flex-grow：0


• flex-shrink ：0


• flex-basis：50％（或任何你想要的） li>
  

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

您可以使用 flex 速记属性将所有这些属性合并为一个规则：

  flex：0 0 50％; / *两个项目将显示，或... * / 
 flex：0 0 25％/ *四个项目将显示，或... * / 
 flex：0 0 20％/ *五项将显示* / 
  

以下是完整的代码：

  .bargraph {display：flex;溢出：隐藏; background：red;} .bargraph> dt {flex：0 0 50％;}  

 < dl class =bargraph> <峰; dt>试验< / DT> <峰; dt>试验< / DT> <峰; dt>试验< / DT> <峰; dt>试验< / DT> <峰; dt>试验< / DT> < dt> test< / dt>< / dl>  

$ b

修订小提琴

I want to push elements out in order to hide them while using flex.

For example, if flex-basis is 50%, show only two items flexed into the given space while the other elements are in overflow:hidden; territory.

Or if flex-basis is 25% then only show 4 flex elements and hide the others.

Is this possible?

.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/

解决方案

In addition to flex-basis, use the flex-grow and flex-shrink properties to control sizing.

More specifically:

• flex-grow: 0
• flex-shrink: 0
• flex-basis: 50% (or whatever you want it to be)

This tells flex items: don't grow, don't shrink, be a fixed percentage width

You can combine all these properties into one rule with the flex shorthand property:

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 */

Here's the full code:

.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>

Revised Fiddle

这篇关于使用flex-basis来控制线上显示的项目数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！