Flex-box僅顯示可容納在容器中的盡可能多的項目

Question

我只想使用CSS來制作它，所以我有一個使用display: inline-flex的容器display: inline-flex 。 我希望此容器僅在內部項目適合容器且不溢出的情況下顯示它們。 如果容器內的任何部分溢出，那么我不想顯示它。 目前，我可以隱藏盒子中溢出的部分，但是我不能隱藏整個溢出的項目。

有什么方法可以僅用HTML和CSS完成的嗎？ 我目前正在使用的是此代碼段https://codepen.io/duebstep/pen/OXENqN

Answer 1

在這里，我向flex-container添加了固定高度，並將flex-wrap設置為wrap
（並且將nowrap規則更改為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> 

Answer 2

嘗試這個

<ul class="flex-container nowrap">
 <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>
 <li style="clear:both"></li>
</ul>

CSS

<style>
 .flex-container {
   max-width: 600px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;

}

.flex-item {
  float:left;
  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;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 1 auto;
   }
</style>

Answer 3

幾個想法。 首先，檢測div部分位於其父級外部是javascript技巧，而不是CSS。

第二，閱讀這本很棒的flexbox指南 。 這將幫助您清理CSS，並為您提供一些更清潔的方法。 它當然幫助了我。

最后，根據使用的固定大小，css可能會實現。 您要允許滾動嗎？ 為什么他們的堅硬高度和最小寬度？ 這可以幫助我指導您找到更適合的解決方案。