Css 在display:flex中使用起始宽度初始化div

我正在努力实现一个特定的布局。我有一行横跨屏幕的宽度，其中有许多内嵌的div（制表符）

我希望所有的标签都以相同的大小开始（比如200px），但是当我们有太多标签时，可以调整以适应屏幕。使用

display:flex

，我们可以实现拟合（请参见下面的代码），但我不确定如何将每个选项卡的宽度初始化为相同

TLDR：如何使所有选项卡以相同的大小开始，然后按比例缩小以适应屏幕

函数newItem（）{
var newTab=document.createElement（'div'）
newTab.classList.add（'tab'）
newTab.innerHTML='Hello'
document.querySelector（'.container'）.appendChild（newTab）
}

body，html{
宽度：100%
}
.集装箱{
显示器：flex；
宽度：计算（100%-10px）；
}
.标签{
显示：内联；
高度：20px；
填充：1px；
最大宽度：200px；
背景色：#bbb；
边框：1px纯黑；
溢出：隐藏；
}

新的
一个
两个
二十三

您可以通过给所有孩子一个相同的

flex

值来强制他们“均匀填充家长”

在这种情况下，您只需将

flex:1

应用于

.tab

定义

函数newItem（）{
var newTab=document.createElement（'div'）
newTab.classList.add（'tab'）
newTab.innerHTML='Hello'
document.querySelector（'.container'）.appendChild（newTab）
}

body，html{
宽度：100%
}
.集装箱{
显示器：flex；
宽度：计算（100%-10px）；
}
.标签{
显示：内联；
高度：20px；
填充：1px；
最大宽度：200px；
背景色：#bbb；
边框：1px纯黑；
溢出：隐藏；
弹性：1；
}

新的
一个
两个
二十三

您可以通过给所有孩子一个相同的

flex

值来强制他们“均匀填充家长”

在这种情况下，您只需将

flex:1

应用于

.tab

定义

函数newItem（）{
var newTab=document.createElement（'div'）
newTab.classList.add（'tab'）
newTab.innerHTML='Hello'
document.querySelector（'.container'）.appendChild（newTab）
}

body，html{
宽度：100%
}
.集装箱{
显示器：flex；
宽度：计算（100%-10px）；
}
.标签{
显示：内联；
高度：20px；
填充：1px；
最大宽度：200px；
背景色：#bbb；
边框：1px纯黑；
溢出：隐藏；
弹性：1；
}

新的
一个
两个
二十三

哦，哇，那太简单了。很好，谢谢！还有一件事：我如何确保元素现在不超过行？如果我在选项卡上添加一点填充物，它们在达到填充物的大小后就不再收缩。@Andreiciara嗯，不幸的是，我不太确定您是否可以应用动态（收缩）填充物来补偿这么多项：（至少我现在想不出来。不过我明天可以玩。哦，哇，那太简单了。很好用，谢谢！还有一件事：我如何确保元素现在不超过线条？如果我在标签上添加一点填充物，一旦它们达到填充物的大小，它们就不再收缩了。@Andreicoara嗯，不幸的是我不太确定你能不能用动态（收缩）填充来补偿这么多的项目：（至少我不能马上想到。不过我明天可以玩它。