我想使用具有一些宽度相同的项目的flexBox.我注意到flexBox会均匀地分布空间,而不是空间本身.
例如：
- .header {
- display: flex;
- }
- .item {
- flex-grow: 1;
- text-align: center;
- border: 1px solid black;
- }
- <div class="header">
- <div class="item">asdfasdfasdfasdfasdfasdf</div>
- <div class="item">z</div>
- </div>
第一项比第二项大很多.如果我有3个项目,4个项目或n个项目,我希望它们全部显示在同一行上,每个项目的空间量相等.
有任何想法吗？
解决方法
设置它们以使它们的flex-basis为0(因此所有元素具有相同的起点),并允许它们增长：
flex：1 1 0
