了解 CSS3 中弹性盒子布局 flex-flow 属性的使用
功能描述
前提：使用 display: flex 将模块设置为弹性盒子布局模式
flex-flow 是 flex-direction 与 flex-wrap 两个属性的简写形式。这个属性用于在弹性容器（flex）中设置项目的排列方式，如果容器不是弹性布局，则属性无效。flex-direction 属性决定了项目的主轴方向，而 flex-wrap 属性决定了项目是否换行。
因此，flex-flow 属性包含两个属性值，第一个属性值是 row (默认按行排序→)、row-reverse (按行倒序←)、column (按列排序↓) 或者 column-reverse (按列倒序↑)，第二个属性值是 nowrap (默认不换行)、wrap (顺序换行) 或者 wrap-reverse (倒序换行)。两个属性之间可以任意组合，组成 12 种效果，下文举一种组合进行示例。
代码示例
使用 flex-flow: column wrap; 实现项目按列排序，并且当容器不足以容纳所有项目时将自动换行。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color: green;
height: 760px;
/* 设置样式 */
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>
浙公网安备 33010602011771号