从包装中排除第一个弹性项目

Question

我有一个footer容器flex。它包含一个徽标图像和四个文本元素，总共五个flex项目在窗口中水平居中，允许任何额外的空间均匀地扩展到集合项目的左侧和右侧，而不是它们之间的空间

他们有足够的空间在大多数桌面上并排坐着，但是他们需要换上小窗户。他们这样做很好，除了它在美学上看起来很尴尬。我希望第一个flex项目（徽标图像）表现得像它的兄弟姐妹，直到换行，我希望它的兄弟项目在它旁边包裹，但不要去它下面的行，他们目前做。下面是一个例子，说明它当前的行为方式（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个变量，但它们与问题无关。

Answer 1

这里的主要问题是，对于现有的标记，只要项目4为5个断行，它们就会自行转到一行，并且没有Flexbox属性可以使它们 bump float＆＃39; d元素）。

使用CSS Grid，你可以做到这一点，但它的浏览器支持也比Flexbox少。

这里最简单，最好的Flexbox解决方案是包装2-5项。有了这个，您将避免固定高度，绝对定位等任何限制，如果保持现有标记，并获得一个完全动态，响应迅速的解决方案。

Stack snippet

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;