了解 CSS3 中彈性盒子布局 flex-flow 屬性的使用
功能描述
前提：使用 display: flex 將模塊設(shè)置為彈性盒子布局模式
flex-flow 是 flex-direction 與 flex-wrap 兩個(gè)屬性的簡(jiǎn)寫(xiě)形式。這個(gè)屬性用于在彈性容器（flex）中設(shè)置項(xiàng)目的排列方式，如果容器不是彈性布局，則屬性無(wú)效。flex-direction 屬性決定了項(xiàng)目的主軸方向，而 flex-wrap 屬性決定了項(xiàng)目是否換行。
因此，flex-flow 屬性包含兩個(gè)屬性值，第一個(gè)屬性值是 row (默認(rèn)按行排序→)、row-reverse (按行倒序←)、column (按列排序↓) 或者 column-reverse (按列倒序↑)，第二個(gè)屬性值是 nowrap (默認(rèn)不換行)、wrap (順序換行) 或者 wrap-reverse (倒序換行)。兩個(gè)屬性之間可以任意組合，組成 12 種效果，下文舉一種組合進(jìn)行示例。
代碼示例
使用 flex-flow: column wrap; 實(shí)現(xiàn)項(xiàng)目按列排序，并且當(dāng)容器不足以容納所有項(xiàng)目時(shí)將自動(dòng)換行。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color: green;
height: 760px;
/* 設(shè)置樣式 */
display: flex;
flex-flow: column wrap;
}
.flex-container div {
background-color: #f1f1f1;
width: 320px;
height: 320px;
margin: 10px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
浙公網(wǎng)安備 33010602011771號(hào)