在移動(dòng)端開(kāi)發(fā)中，經(jīng)常會(huì)遇到一行多列的需求。比如我們希望在一行中展示多個(gè)圖片或者文本。這時(shí)候，我們可以使用CSS的一些屬性和技巧來(lái)實(shí)現(xiàn)這個(gè)效果。
.container {
display: flex;
justify-content: space-between;
}
.item{
width: 30%;
}首先，我們需要一個(gè)容器，可以使用
或者其他塊級(jí)元素。我們?yōu)檫@個(gè)容器設(shè)置了display:flex;這個(gè)屬性可以讓我們更容易的控制子元素的排列。
接下來(lái)，我們需要給子元素設(shè)置寬度，在這個(gè)例子中，我們?cè)O(shè)置了.item樣式的寬度為30%。這里有一個(gè)技巧，我們不必在所有的item元素上設(shè)置寬度，只需要在第一個(gè)item元素上設(shè)置寬度，其他的元素不設(shè)置寬度即可。
.container {
display: flex;
justify-content: space-between;
}
.item:first-child{
width: 30%;
}這個(gè)時(shí)候，我們就可以在一行中展示多個(gè)元素了。如果我們希望元素之間有一些間距，可以使用justify-content屬性。在這個(gè)例子中，我們使用了space-between的值，這個(gè)值會(huì)讓元素之間的間距相等。
需要注意的是，這個(gè)方法適用于元素?cái)?shù)目固定的情況。如果元素?cái)?shù)量不確定，可以考慮使用響應(yīng)式布局或者JS來(lái)控制元素的排列。