如何隐藏块

Question

一共有11个块，每个块的最小宽度为100px，在一行中，父级的宽度为屏幕的100%。如何在parent全宽排列block，同时改变分辨率，不完全适合的block不转移，而是完全隐藏***

.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid black;
  text-align: center;
  min-width: 110px;
  display: inline-block;
  width: 10%;

}

section{
  overflow: hidden;
  display: flex;
}

<section>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>

***，插图和我的代码如下：

Answer 1

我认为仅 CSS 没有任何简单的方法可以完成您所说的事情。您必须采用屏幕尺寸并根据该尺寸隐藏块的其余部分。

Answer 2

您可以为此使用 CSS 网格：

.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid black;
  text-align: center;
}

section{
  overflow: hidden;
  height:50px;
  display: grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
}

<section>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>

如何隐藏块

How hide blocks

html

css

media-queries

flexbox