从包装中排除第一个弹性物品 [英] Exclude first flex item from wrap
问题描述
我有一个footer，它是一个flex容器.它包含一个徽标图像和其后的四个文本元素，共有五个flex项在窗口中水平居中，从而允许任何额外的空间均匀地延伸到集合项的左右，而不是它们之间的空间. /p>
在大多数台式机上，它们可以并排放置很多空间，但是它们需要包裹在较小的窗户上.他们做的很好，除了看起来很尴尬.我希望第一个flex项(徽标图像)的行为像它的兄弟姐妹一样，直到换行为止，在那里我希望其兄弟姐妹项目在其旁边换行，但不转到它们当前所在的行下.这是当前的行为说明，其中(A)是一个宽窗口，而(B)是一个已调整大小的较小窗口:
这就是我希望它表现的方式:
我相信在第一个flex项目中添加align-self: stretch会有所帮助，但这似乎并不是要覆盖换行中的行距.
这是我的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'd元素一样).
尽管使用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>
I have a footer which is a flex container. It contains a logo image and four text elements after, totaling five flex items which are centred horizontally in the window, allowing any additional space to extend evenly to the left and right of the collective items, rather than the spaces between them.
There's plenty of room for them to sit side-by-side on most desktops, but they need to wrap on smaller windows. They do this fine, except it's aesthetically awkward looking. I want the first flex item (the logo image) to behave like it siblings, up until the wrap, where I want its sibling items to wrap next to it, but not go to the line under it, which they currently do. Here's an illustration of how it's currently behaving where (A) is a wide window and (B) is a resized, smaller window:
and here's how I would like it to behave:
I believed that adding align-self: stretch to the first flex item would help but this doesn't appear to be intended for overriding line spacing in wraps.
Here's my 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>
and 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;
}
}
The css uses a few styl variables but they're not pertinent to the question.
The main problem here, with the existing markup is, as soon as the item 4 an 5 break line, they will go to a row of their own, and there is no Flexbox properties to make them bump up as you want (like float'd element would).
With CSS Grid you would be able to do this though, but it also has less browser support than Flexbox does.
The simplest and best Flexbox solution here is to wrap the 2-5 items. With this you will avoid any limits that fixed height's, absolute positioning, etc. can cause if to keep the existing markup, and get a fully dynamic, responsive solution.
Stack snippet
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>
这篇关于从包装中排除第一个弹性物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
