Flexbox没有为元素提供相等的宽度
Flexbox没有为元素提供相等的宽度
提问于 2014-08-01 02:19:59
尝试创建一个最多包含5个项目、最少包含3个项目的flexbox导航，但它没有在所有元素之间平均分配宽度。
我仿效的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
萨斯
* {
font-size: 16px;
}
.tabs {
max-width: 1010px;
width: 100%;
height: 5rem;
border-bottom: solid 1px grey;
margin: 0 0 0 6.5rem;
display: table;
table-layout: fixed;
}
.tabs ul {
margin: 0;
display: flex;
flex-direction: row;
}
.tabs ul li {
flex-grow: 1;
list-style: none;
text-align: center;
font-size: 1.313rem;
background: blue;
color: white;
height: inherit;
left: auto;
vertical-align: top;
text-align: left;
padding: 20px 20px 20px 70px;
border-top-left-radius: 20px;
border: solid 1px blue;
cursor: pointer;
}
.tabs ul li.active {
background: white;
color: blue;
}
.tabs ul li:before {
content: "";
}<div class="tabs">
<ul>
<li class="active" data-tab="1">Pizza</li>
<li data-tab="2">Chicken Noodle Soup</li>
<li data-tab="3">Peanut Butter</li>
<li data-tab="4">Fish</li>
</ul>
</div>
回答 2
Stack Overflow用户
发布于 2016-05-30 18:25:11
要使用Flex创建等宽元素，应将设置为的子元素(flex元素)：
flex-basis: 25%;
flex-grow: 0;它将赋予行中所有元素25%的宽度。它们不会一个接一个地生长和消失。
Stack Overflow用户
发布于 2021-08-05 12:42:30
正如@James Montagne答案中所解释的，flex-basis: 0将确保flexbox列的均匀分布，这在本例中是有效的，因为列内容可以换行，并且不会强制宽度。但是，如果列内容的宽度是强制的(例如，使用图像宽度或空白: nowrap)，则解决方案是设置min-width: 0...
li {
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25066214
复制相关文章
相似问题