2017-07-28 66 views
-4

first 5 items, then 4 on the next row and so on使用flexbox可以使用以下佈局嗎?

首先5個項目,然後 4下一行, 5個項目上的下一行 ,然後再4和 等。

+1

nth-child(奇數){寬度:父寬度/ 5} ...第n個孩子(偶數){寬度:父寬度/ 4} –

+1

是的,該佈局可能與flexbox。如果遇到實現問題,請嘗試[發佈最小,完整且可驗證的示例](https://stackoverflow.com/help/mcve)您的html和css。 – Lars

回答

1

不會對標記你希望我這樣做的任何細節: 僅有3排,每5個子項目,除了中間的一個有4個項目,然後中心項目horizo​​ntaly:

.row { 
    display: flex; 
    justify-content: center; 
} 

.item { 
    margin:10px; 
    width: 50px; 
    height: 50px; 
    background-color: black; 
    border-radius: 50%; 
} 

https://jsfiddle.net/leonsaysHi/y0yqpjof/

相關問題