我尝试创建2个菜单栏，但由于元素数量不同，所以无法水平对齐菜单按钮。我尝试使用max-witdh，flex-basis，flex-grow，flex-shrink属性，但无法实现所需的功能。
在这里您可以找到一个代码片段：
body {
background-color: black;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.row{
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
}
p, .myCustomButton {
border-radius: 4px;
height: 2.8em;
font-size: 1.6rem;
color: #fff;
background-color: red;
margin: 0.4rem 0.2rem;
padding: 0 1em;
flex: 1;
}
.row2 {
justify-content: flex-end;
}
.myCustomButton {
max-width: 20%;
flex: 0.1 0.1 auto;
}<div class='row'>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div class='row row2'>
<p class='myCustomButton'>test</p>
</div>我希望在每种情况下（响应）我的自定义按钮和测试按钮之间的大小都相同。我可以通过哪种方式实现这一目标？我应该寻找哪个CSS属性？对我来说，它是flex-basis，但我不知道如何使用它，我已经从mozzila doc中阅读了它的工作原理，也许我错过了一些东西
提前致谢。
最后一个元素之所以不适合其他元素，是因为有边距。在<div>周围增加一个<p>并告诉其中一个row2不要超过20％的基数，这对我来说是个窍门：
<div class='row row2'>
<div>
<p class='myCustomButton'>test</p>
</div>
</div>
.row2 > div {
flex: 0 1 20%;
}
.row {
display: flex;
width: 100%;
}
.row > div {
flex: 1 1 20%;
}
p {
border-radius: 4px;
height: 2.8em;
font-size: 1.6rem;
color: #fff;
background-color: red;
margin: 0.4rem 0.2rem;
padding: 0 1em;
flex: 1;
}
.row2 {
justify-content: flex-end;
}
.row2 > div {
flex: 0 1 20%;
}<div class='row'>
<div>
<p>test</p>
</div>
<div>
<p>test</p>
</div>
<div>
<p>test</p>
</div>
<div>
<p>test</p>
</div>
<div>
<p>test</p>
</div>
</div>
<div class='row row2'>
<div><p class='myCustomButton'>test</p></div>
</div>如果可能的话，我建议使用CSS网格，这种方式会更简单：
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句