flex 弹性布局
1、布局原理：给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局
- 为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效
- Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
- 任何容器都可以设置为弹性布局
2、父项常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
3、子项常见属性
- flex子项目占的份数
- align-self控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0，但和 z-index 不一样
我写的微信小程序你画我猜，整体使用flex布局，也用到了传统布局和流式布局的方式，废话就不多说了，直接看效果和代码：
css：
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?7kkyc2');src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}* {padding: 0;margin: 0;
}body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 16px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;color: #000;overflow-x: hidden;background: #b6e2ee;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-text-size-adjust: none;
}li {list-style: none;cursor: pointer;
}header {position: relative;display: flex;height: 40px;background-color: #000;
}header .lt,
header .rt {position: absolute;top: 5px;height: 30px;display: flex;flex-direction: column;justify-content: center;cursor: pointer;
}header .lt {left: 10px;align-items: center;width: 30px;background-color: #999;border-radius: 50%;
}header .rt {right: 5px;width: 100px;border-radius: 20px;background-color: #1a1a1a;
}header .lt::after {content: '\e90a';font-family: 'icomoon';color: #7f7f7f;
}header .rt ul {display: flex;
}header .rt ul li {flex: 1;display: flex;justify-content: center;font-family: 'icomoon';color: #7f7f7f;
}header .rt ul li:nth-child(1)::after {content: '\e91a';
}header .rt ul li::after {content: '\e91b';
}header .rt ul li:nth-child(3)::after {content: '\f192';
}.head {display: flex;position: relative;height: 60px;
}.head .out,
.head .eye {position: absolute;bottom: 0;display: flex;align-items: center;justify-content: center;box-sizing: border-box;height: 30px;border: 2px solid #000;background-color: #ffe666;cursor: pointer;
}.head .out {left: 15px;flex-direction: column;width: 30px;border-radius: 50%;
}.head .eye {right: 100px;flex-direction: row-reverse;width: 50px;border-radius: 20px;
}.head .out::after {flex: 1;content: '\e915';font-family: 'icomoon';font-size: 18px;font-weight: 700;
}.head .eye::after {content: '\e918';font-family: 'icomoon';font-size: 18px;font-weight: 700;margin-right: 2px;
}.content {display: flex;flex-direction: column;width: 90%;height: 420px;border: 2px solid #000;border-radius: 20px;margin: 10px auto;background-color: #d7eefc;
}.content .rule {display: flex;flex-direction: column;width: 90%;height: 50%;border-radius: 15px;background-color: #fff;margin: 30px auto 5px;
}.content h3 {text-align: center;font-weight: 400;
}.content .rule p {padding: 0 10px 0 15px;font-size: 12px;line-height: 25px;
}.content .start {display: flex;flex-direction: column;
}.content .bot {display: flex;justify-content: center;margin: 35px auto;
}.content .bot ul {display: flex;
}.content .bot ul li {width: 12px;height: 12px;border-radius: 50%;background: #53e6bd;box-shadow: 3px 3px 2px 2px #000;
}.content .bot ul li {margin: auto 8px;
}.content .btn {display: flex;justify-content: space-evenly;
}.btn .lt {width: 95px;height: 45px;border: 2px solid #000;border-radius: 30px;background: #53e6bd;cursor: pointer;
}.btn .rt {width: 200px;height: 45px;border: 2px solid #000;border-radius: 30px;background: #ffe666;cursor: pointer;
}footer {/* display: flex; *//* justify-content: space-evenly; */
}footer ul {display: flex;justify-content: space-evenly;/* flex-direction: column; */
}footer ul li {position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 40px;height: 40px;border: 2px solid #87ceeb;box-shadow: 0px 0px 5px #87ceeb;background: #d3eef5;border-radius: 50%;
}footer ul li:nth-child(1) {background-image: url(../img/tx1.jpg);
}footer ul li:nth-child(2) {background-image: url(../img/tx2.jpg);
}footer ul li:nth-child(n+3):after {content: '\e917';font-family: 'icomoon';color: #87ceeb;font-size: 18px;font-weight: 700;
}footer ul li button {position: absolute;top: -10px;width: 40px;font-size: 12px;border-radius: 10px;box-sizing: border-box;white-space: nowrap;
}footer ul li:nth-child(1) button {background: #ffb433;
}footer ul li:nth-child(2) button {background: #53e6bd;
}footer ul li button {/* 缩放字体所在元素即可实现小字体显示 */transform: scale(.8);
}/* footer ul li i {position: absolute;top: 4px;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 5px solid #ffb433;
} */footer ul li i {position: absolute;top: 3px;transform: rotate(45deg);width: 5px;height: 5px;border-right: 1px solid #000;border-bottom: 1px solid #000;
}footer ul li:nth-child(1) i {background: #ffb433;
}footer ul li:nth-child(2) i {background: #53e6bd;
}footer ul li span {position: absolute;bottom: -25px;font-size: 12px;
}footer .bottom {display: flex;position: fixed;bottom: 2px;left: 18px;width: 90%;height: 30px;border-radius: 15px;
}.bottom input {flex: 1;font-size: 15px;line-height: 30px;padding-left: 20px;border: 1px solid #000;border-radius: 15px;color: #333;background-color: #b6e2ee;
}footer .bef {display: flex;margin: 20px auto;font-size: 12px;align-items: center;padding: 5px 20px;
}.bef div {width: 18px;height: 18px;background: url(../img/tx.jpg);background-size: cover;border-radius: 50%;
}.bef i {font-style: normal;color: #87ceeb;
}.bef p {color: #047ed6;
}body：
<body><header><div class="lt"></div><div class="rt"><ul><li></li><li></li><li></li></ul></div></header><div class="head"><div class="out"></div><div class="eye">0</div></div><div class="content"><div class="rule"><h3>-游戏规则-</h3><p>1.加入玩家不少于2人时即可开始游戏。</p><p>2.绘画阶段描述者根据所选题目绘画，其他人答题。</p><p>3.答题者根据答对的先后顺序获得不同分数。</p><p>4.描述者根据猜对人数获得分数，所有人猜对了则不会得分。</p><p>5.最后根据最终分数进行排名。</p><p>6.下载【玩吧APP】不出门在家玩吧！</p></div><div class="start"><h3>准备阶段</h3><div class="bot"><ul><li></li><li></li><li></li></ul></div><div class="btn"><button class="lt">邀请</button><button class="rt">开始游戏</button></div></div></div><footer><ul><li><button>房主</button><i></i><span>Lion</span></li><li><button>已准备</button><i></i><span>Girl</span></li><li></li><li></li><li></li><li></li></ul><div class="bef"><div></div><i>小总管：</i><p>欢迎来到你画我猜</p></div><div class="bottom"><input type="text" value="在此输入聊天内容"></input></div></footer>
</body>写得不太好，仅供参考！错漏之处，敬请斧正！