时间戳

首页 > 解决方案 > 创建使用 css 自动调整大小的弹性框标签

html - 创建使用 css 自动调整大小的弹性框标签

问题描述

我正在尝试复制在浏览器上看到的选项卡，它会根据浏览器宽度自动调整大小
到目前为止这是我的进步

#container {
  display: flex;
  width: 35%;
  height: 3rem;
  text-align: center;
  white-space: nowrap;
  background-color: red;
}

.item {
  background-color: black;
  color: white;
  border: none;
  outline: none;
  margin: 0.1rem;
  flex:0;
}

.rest {
  flex: 1;
}
<div id="container">
  <button class="item">item 1</button>
  <button class="item">item 2</button>
  <button class="item">item 3</button>
  <span class="rest"></span>
</div>

我在网上搜索了解决方案，奇怪的是没有一个flexbox只涉及使用纯 css。
那么有什么方法可以使用纯 css 和 flex box 来创建它吗？

标签： htmlcss

解决方案

如果您尝试复制浏览器中看到的选项卡，您可能想尝试一下。

删除您span.rest，然后将您的代码更改为此。

#container {
  display: flex;
  width: 35%;
  height: 3rem;
  text-align: center;
  white-space: nowrap;
  background-color: red;
}

.item {
  background-color: black;
  color: white;
  border: none;
  outline: none;
  margin: 0.1rem;
  flex:1;
  max-width: 100px
}

flex:1将使它们占用可用空间，但您的最大宽度将意味着它们不会比应有的更大。

推荐阅读