Flexbox的 - 在

Question

排

單品我有下面的代碼：http://codepen.io/anon/pen/rxZRJP?editors=1100

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並不是真正的選擇。

Answer 1

有沒有更靈活的方法，沒有單品/單品寬度一直都一樣？

是的，從您的flex速記中刪除flex-grow: 1。

因此，不是這樣的：

.navigation-item { flex: 1 1 20%; } 

試試這個：

.navigation-item { flex: 0 1 20%; } 

Revised Codepen

的flex-grow: 1規則告訴柔性物品消耗容器中的所有可用空間。當它們共享一行時，可用空間在它們之間均勻分佈。但是當第四個項目本身包裝到第二行時，它佔用所有空間。

另外，如果你不想要的物品收縮，則需要調整flex-shrink：

.navigation-item { flex: 0 0 20%; } 

除了您使用的是百分比寬度，所以柔性項目將縮減爲原因。

Answer 2

你可以得到很多靈感這個線程：Flex-box: Align last row to grid

在你的情況，你可以做很多的小東西，實現你在一個簡單的方法想要什麼。

1/Add box-sizing: border-box，所以填充包含在定義的寬度中。查看更多解釋http://www.paulirish.com/2012/box-sizing-border-box-ftw/

2 /使用calc()從寬度中刪除邊距，所以每個項目都適合在線上。

/* New box-sizing, so the padding and the border are included in element sizing */ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
.navigation { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.navigation-item { 
 
    display: flex; 
 
    
 
    /* Make the 4 elements to fit in a single line */ 
 
    flex: 1 1 calc(25% - 30px); 
 
    height: 190px; 
 
    padding: 15px; 
 
    margin: 15px; 
 
    list-style-type: none; 
 
} 
 

 
.navigation-item a { 
 
    display: inline-block; 
 
    margin: auto; 
 
    
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    font-size: 24px; 
 
}

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

3 /如果你想第4單元是一個單獨的行，你可以改變柔性基礎

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.navigation { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.navigation-item { 
 
    display: flex; 
 
    
 
    /* We make that only 3 elements fit in a line */ 
 
    flex: 1 1 calc(100%/3 - 30px); 
 
    height: 190px; 
 
    padding: 15px; 
 
    margin: 15px; 
 
    list-style-type: none; 
 
} 
 

 
.navigation-item a { 
 
    display: inline-block; 
 
    margin: auto; 
 

 
    color: #ffffff; 
 
    text-decoration: none; 
 
    font-size: 24px; 
 
}

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