Flex-box仅显示可容纳在容器中的尽可能多的项目 [英] Flex-box only display as many items that fit in a container
问题描述
我只想使用CSS来制作它,所以我有一个使用 display:inline-flex
的容器.我希望此容器仅在内部项目适合容器且不会溢出的情况下显示它们.如果容器内的任何部分溢出,那么我不想显示它.目前,我可以隐藏盒子中溢出的部分,但是我不能隐藏整个溢出的项目.
I want to only use CSS to make it so I have a container which is using display: inline-flex
. I want this container to only display internal items if they fit within the container and do not overflow. If any part of the container inside overflows, then I do not want to display it. Currently I can hide the portion of the box that overflows, but i can't hide the whole overflowed item.
仅HTML和CSS有什么方法可以实现吗?我目前正在使用的代码段 https://codepen.io/duebstep/pen/OXENqN
Is there any way to accomplish with just HTML and CSS? What I have currently working is in this code snippet https://codepen.io/duebstep/pen/OXENqN
推荐答案
在这里,我为 flex-container
添加了固定高度,并将 flex-wrap
设置为<代码>包装
(并将 nowrap
规则更改为 wrap
)
Here I added a fixed height to the flex-container
and set the flex-wrap
to wrap
(and changed the nowrap
rule to wrap
)
.flex-container {
overflow: hidden;
height: 130px;
max-width: 600px;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: inline-flex;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
min-width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
flex: 1;
display: inline-block;
}
<ul class="flex-container wrap">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>
这篇关于Flex-box仅显示可容纳在容器中的尽可能多的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!