<分区>
<分区>
在研究了一段时间的问题并考虑了所有 float 和 text-align 替代方案之后，我对使用 flexbox 找到的解决方案非常满意但是最后一行(当它溢出时)存在一个问题，因为这些元素的宽度与前几行中的宽度不同，因为它们被允许拉伸(stretch)更多(最大宽度)以尝试填充剩余空间。
我的要求很简单:
1.所有元素必须具有相同的宽度(包括最后一行)；
2. 如果行已满，则所有元素必须等间距；否则，必须左对齐(通常是最后一行)；
3. 当达到最小宽度时，元素可以(必须)溢出(响应式调整大小)；
4. 纯 CSS 解决方案，可能避免媒体查询；
5. 我宁愿使用 flex-basis: 0 真正相同的宽度(最后一行问题站立)；
6.非flexbox解决方案只要满足其他要求即可考虑；
为了清晰起见，我删除了供应商前缀，但我在实际页面上使用了它们。
CSS
nav {
margin: 20px 0px;
}
nav #linkgroup {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* aligns left when not full */
align-items: center;
align-content: space-around;
}
nav #linkgroup .link {
min-width: 120px;
width: 120px; /* only used because of Safari issue below */
max-width: 160px;
height: 30px;
margin: 5px;
flex-grow: 1;
flex-basis: auto; /* 0 gives all exact same size but have to use auto and set 'width' for Safari issue https://bugs.webkit.org/show_bug.cgi?id=136041 */
line-height: 30px; /* set equal to height, for vertical align trick */
text-align: center;
}
nav #linkgroup .link a.btn {
display: block;
vertical-align: middle;
line-height: normal;
border-radius: 2px;
padding: 5px 10px 5px 10px;
border: solid #1f628d 2px;
text-decoration: none;
}
HTML
<nav>
<div id="linkgroup">
<div class="link"><a class="btn" href="#">A</a></div>
<div class="link"><a class="btn" href="#">AB</a></div>
<div class="link"><a class="btn" href="#">ABC</a></div>
<div class="link"><a class="btn" href="#">ABCD</a></div>
<div class="link"><a class="btn" href="#">ABCDE</a></div>
<div class="link"><a class="btn" href="#">ABCDEF</a></div>
<div class="link"><a class="btn" href="#">ABCDEFG</a></div>
</div>
</nav>
nav {
margin: 20px 0px;
padding: 0px 0px 5px 0px; /* to space when multi-line */
}
nav #linkgroup {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* aligns left when not full */
align-items: center;
align-content: space-around;
}
nav #linkgroup .link {
min-width: 120px;
width: 120px; /* only used because of Safari issue below */
max-width: 160px;
height: 30px;
margin: 5px;
flex-grow: 1;
flex-basis: auto; /* 0 gives all exact same size but have to use auto and set 'width' for Safari issue https://bugs.webkit.org/show_bug.cgi?id=136041 */
line-height: 30px; /* set equal to height, for vertical align trick */
text-align: center;
}
nav #linkgroup .link a.btn {
display: block;
vertical-align: middle;
line-height: normal;
border-radius: 2px;
padding: 5px 10px 5px 10px;
border: solid #1f628d 2px;
text-decoration: none;
}<nav>
<div id="linkgroup">
<div class="link"><a class="btn" href="#">A</a></div>
<div class="link"><a class="btn" href="#">AB</a></div>
<div class="link"><a class="btn" href="#">ABC</a></div>
<div class="link"><a class="btn" href="#">ABCD</a></div>
<div class="link"><a class="btn" href="#">ABCDE</a></div>
<div class="link"><a class="btn" href="#">ABCDEF</a></div>
<div class="link"><a class="btn" href="#">ABCDEFG</a></div>
</div>
</nav>最佳答案
尝试在 nav #linkgroup .link 中将 flex-grow 属性设置为 0:
flex-grow: 0;
它将避免在最后一行不必要地增加 div。
关于css - 在多行上下文中具有响应式等宽的元素组，最后一行问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39744426/