單品我有下面的代碼:http://codepen.io/anon/pen/rxZRJP?editors=1100Flexbox的 - 在
HTML:
<nav class="navigation">
<li class="navigation-item" style="background: #003f8f">
<a href="#">1</a>
</li>
<li class="navigation-item" style="background: #548122">
<a href="#">2</a>
</li>
<li class="navigation-item" style="background: #f4a628">
<a href="#">3</a>
</li>
<li class="navigation-item" style="background: #d21527">
<a href="#">4</a>
</li>
</nav>
CSS:
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.navigation-item {
display: flex;
flex: 1 1 20%;
height: 190px;
list-style-type: none;
align-items: flex-end;
justify-content: center;
padding: 15px;
margin: 15px;
}
.navigation-item a {
color: #ffffff;
text-decoration: none;
font-size: 24px;
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
如果調整視口大約1200px,第四個項目將包裝和發展它自己的單行。
爲了防止單挑出第四個項目,我可以編寫具有固定視口大小的@media-query
,並更改flex-basis
或給出項目min-width
。
所以我的問題是:
有沒有更靈活的方式,有沒有項目單挑?
編輯:
我想要的物品包裹,我需要的產品,以填補所有可用空間。因此刪除flex-grow
或flex-wrap
並不是真正的選擇。
你的意思相同的「寬度」,但他們應該收縮? –
@NenadVracar是的,無論是第四個項目應該縮小到其他三個項目的寬度,或者第三個項目應該與第四個項目一起包裝。如果這對你有意義...... – Th0rkel
只需刪除'flex-wrap:wrap;'就像這樣https://jsfiddle.net/m7dfvw24/4/ –