我有一个 footer，它是一个 flex 容器。它包含一个 Logo 图像和后面的四个文本元素，总共五个 flex 元素，它们在窗口中水平居中，允许任何额外的空间均匀地扩展到集体元素的左侧和右侧，而不是它们之间的空格。
在大多数桌面上它们有足够的空间并排放置，但它们需要环绕在较小的窗口上。他们做得很好，除了它在美学上看起来很尴尬。我希望第一个 flex 元素( Logo 图像)表现得像它的 sibling ，直到换行，我希望它的兄弟元素在它旁边换行，但不要转到它下面的行，他们目前所做的。下面是它当前行为的说明，其中 (A) 是一个宽窗口，(B) 是一个调整大小的较小窗口:
下面是我希望它的行为方式:
我认为将 align-self: stretch 添加到第一个 flex 元素会有所帮助，但这似乎并不是为了覆盖换行中的行间距。
这是我的 HTML:
<footer>
<a class='flex-item'><img></a>
<a class='flex-item'>Two</a>
<a class='flex-item'>Three</a>
<a class='flex-item'>Four</a>
<a class='flex-item'>Five</a>
</footer>
和CSS:
footer {
position: relative;
max-width: $pageWidth;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height: 100%;
padding: 0 $baseGrid;
}
.flex-item {
align-self: flex-start;
margin-left: $baseGrid;
&:first-child {
align-self: stretch;
margin-left: 0;
}
}
css 使用了一些 styl 变量，但它们与问题无关。
这里的主要问题是，现有标记的第 4 项和第 5 项一旦换行，它们就会自己排成一行，并且没有 Flexbox 属性使它们凸起 随心所欲(就像 float 元素那样)。
虽然使用 CSS Grid 可以做到这一点，但它的浏览器支持也比 Flexbox 少。
这里最简单最好的 Flexbox 解决方案是包装 2-5 个元素。有了这个，您将避免固定高度、绝对定位等可能导致的任何限制，如果要保留现有标记，并获得完全动态的响应式解决方案。
堆栈片段
footer {
max-width: 250px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
footer .footer-flex {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 0 10px;
}
footer .footer-flex .flex-item {
margin-left: 10px;
}
/* styles for this demo */
footer {
border: 1px solid red;
}
footer + footer {
max-width: 400px;
}
footer .footer-flex .flex-item {
padding: 10px;
border: 1px solid red;
}
<footer>
<a class='flex-item'><img src="http://placehold.it/100" alt=""></a>
<div class='footer-flex'>
<a class='flex-item'>Two</a>
<a class='flex-item'>Three</a>
<a class='flex-item'>Four</a>
<a class='flex-item'>Five</a>
</div>
</footer>
Wider footer
<footer>
<a class='flex-item'><img src="http://placehold.it/100" alt=""></a>
<div class='footer-flex'>
<a class='flex-item'>Two</a>
<a class='flex-item'>Three</a>
<a class='flex-item'>Four</a>
<a class='flex-item'>Five</a>
</div>
</footer>