缩小区块宽度时移除空白区域的实现方案

要解决宽度缩小时区块内出现多余空白的问题，用Flex布局可以轻松实现，核心是利用flex的换行和伸缩特性控制元素排列：

1. 给外层.inputs容器开启Flex布局并允许换行
   设置display: flex和flex-wrap: wrap，让内部的.block元素在空间不足时自动换行，避免横向留白。

2. 让每个.block自适应空间
   给.block添加flex: 1 1 auto，使其能根据可用空间自动伸缩，同时设置min-width（比如200px）保证内容不会被过度挤压变形。

3. 优化.block内部元素排列
   给.block也设置display: flex，让标签span和选择器容器横向对齐，用gap控制两者的间距，替代默认的空白，确保布局紧凑。

4. 重置默认样式
   移除浏览器默认的边距、内边距，避免额外空白干扰。

完整代码示例：

<div class="container">
  <div class="someStuff">someStuff</div>
  <div class="inputs">
    <div class="block">
      <span>Задать шаг: </span>
      <div class="select-container">
        <select>
          <option value="50">50</option>
        </select>
      </div>
    </div>
    <div class="block">
      <span>Цветовая схема: </span>
      <div class="select-container">
        <select>
          <option value="YlOrRd">YlOrRd</option>
        </select>
      </div>
    </div>
  </div>
</div>

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  padding: 10px;
}

.inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* 控制两个block之间的间距 */
  margin-top: 10px;
}

.block {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px; /* 控制标签和选择器的间距 */
}

.select-container select {
  padding: 4px 8px;
  min-width: 100px;
}

调整后，容器宽度足够时两个区块横向排列；宽度缩小时自动换行，且每个区块内部元素紧密贴合，不会出现多余空白区域。

内容的提问来源于stack exchange，提问作者Spawnet