尝试最多包含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;
} …我连续有3个按钮,宽度各不相同.我希望它们都能获得相同的宽度以填充行的剩余宽度,因此最宽的仍将比其他宽度更宽等.
你可以在下面看到我尝试用flex做的事情导致所有按钮的宽度相同.我知道flex-grow可以用来按比例增长每个项目,但我无法弄清楚如何让它们与原始大小相关.
您可以在第二行中看到蓝色项目大于其他两个项目.我只想让所有三个人从他们当前的大小平均扩大到填充行.
谢谢
.row-flex {
width: 100%;
display: flex;
flex-direction: row;
}
.button {
flex: 1;
display: inline-block;
padding: 10px;
color: #fff;
text-align: center;
}
.button--1 {
background: red
}
.button--2 {
background: green;
}
.button--3 {
background: blue;
}<div class="row-flex">
<a href="#" class="button button--1">Single</a>
<a href="#" class="button button--2">Larger title</a>
<a href="#" class="button button--3">Another really large title</a>
</div>
<br/>
<div class="row">
<a href="#" class="button button--1">Single</a>
<a href="#" class="button button--2">Larger title</a>
<a href="#" class="button button--3">Another really large …