body元素设置：
<body> <div id="wai"> <div class="zi">1</div> <div class="zi1">2</div> <div class="zi2">3</div> </div> </body>
父级（id=“wai”）元素设置：
#wai{ height: 600px; height: 300px; background-color: darkgrey; /*弹性盒子元素*/ display: flex; /*水平对齐方式:*/ justify-content: space-between; /*垂直对齐方式：居中*/ align-items: center; /*换行方式*/ flex-wrap: wrap; }
子级（id=“zi”）元素设置：
.zi{ width: 100px; height: 100px; background-color:darkturquoise ; text-align: center; line-height: 100px; font-size: 30px; border: 1px solid red; }
子级（id=“zi1”）元素设置：
.zi1{ width: 100px
background-color:darkturquoise ; text-align: center; line-height: 100px; font-size: 30px; border: 1px solid red; /*子元素中的排列顺序:数值越大越靠右，越小越靠左*/ order: 10; }
子级（id=“zi2”）元素设置：
.zi2{ width: 100px; background-color: darkturquoise; text-align: center; line-height: 100px; font-size: 30px; border: 1px solid red; order: 11; }