实例演示flex容器中的四个属性的功能，参数，以及作用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FLEX布局</title></head><style> /* 初始化 */ *{ margin: 0; padding: 0; box-sizing: border-box; } :root{ font-size: 10px; } body{ font-size: 1.6rem; } .container{ /* 转化为flex容器 */ /* 自动成行内FLEX容器的项目，并且是行内块显示,项目与当前容器等高 */ display: flex; height: 20rem; border: 1px solid red ; } /* 1、单行容器 */ .container{ /* 主轴方向，默认水平，行方向 */ /* flex-direction: row; */ /* 禁止换行 */ /* flex-wrap: nowrap; */ /* 以上两个简化： */ /* flex-flow:主轴方向 是否换行 */ /* flex-flow:row nowrap; */ } /* 2、多行容器 */ .container{ /* 允许换行 */ /* flex-flow: row wrap; */ } .container{ /* 主轴垂直 不换行 */ /* flex-flow: column nowrap; */ } .container{ /* 主轴垂直 换行 */ flex-flow:column wrap; } .container > .item{ padding: 1rem; width: 30rem; background-color: aquamarine; border: 1px solid tomato; }</style><body> <div class="container"> <div class="item">item1</div> <div class="item">tem2</div> <div class="item">iter3</div> <div class="item">item4</div> <div class="item">tem5</div> <div class="item">iter6</div> <div class="item">item7</div> <div class="item">tem8</div> <div class="item">iter9</div> </div></body></html>
