如何使flexbox项目具有相同的大小？

作者

我想使用flexbox，它有一些相同宽度的项目。我注意到flexbox将空间均匀分布，而不是空间本身

例如：

.header{
显示器：flex；
}
.项目{
柔性生长：1；
文本对齐：居中；
边框：1px纯黑；
}
&lt；div class=“header”&gt；
&lt；div class=“项目”&gt；asdfasdfasdfasdfasdfasdfasdfasdf&lt/部门&gt；
&lt；div class=“项目”&gt；z&lt/部门&gt；
&lt/部门&gt

第一项比第二项大得多。如果我有3个项目、4个项目或n个项目，我希望它们都显示在同一行，每个项目的空间相等

有什么想法吗

设置它们，使其flex basis为0（使所有元素具有相同的起点），并允许它们增长：

flex:10px

您的IDE或linter可能会提到度量单位“px”是冗余的。如果不使用它（如：flex:11 0），IE将无法正确呈现此内容。因此，@fabb的评论中提到，px需要支持Internet Explorer

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论

© 2026 开发百科-程序代码问答平台 • Built with