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屋！