HTML部分：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="./index.css" /><title>Flex 布局</title></head><body>默认情况，不设置flex属性：<div class="container"><div class="item ding"><div class="logo"></div><span>钉钉好友</span></div><div class="item wb"><div class="logo"></div><span>新浪微博</span></div><div class="item copy"><div class="logo"></div><span>复制链接</span></div></div>所有项目都设置了 flex: 1：<div class="container grow-all"><div class="item ding"><div class="logo"></div><span>钉钉好友</span></div><div class="item wb"><div class="logo"></div><span>新浪微博</span></div><div class="item copy"><div class="logo"></div><span>复制链接</span></div></div></body></html>
CSS部分：
.grow-all .item {flex: 1;}.container {width: 390px;background-color: #F1F1F1;padding: 25px 25px 0 0;display: flex;}.container .item {width: 52px;height: 65px;text-align: center;font-size: 12px;margin: 0 0 25px 25px;outline: 1px dashed #999;}.logo {width: 40px;height: 40px;border-radius: 25%;margin: 0 auto;margin-bottom: 8px;}.ding .logo {background: url(./images/ding.png) no-repeat center/ 18px 22px;background-color: #32B5F9;}.wb .logo {background: url(./images/wb.png) no-repeat center/ 22px 18px;background-color: #FE5757;}.copy .logo {background: url(./images/link.png) no-repeat center/ 21px 21px;background-color: #FFFFFF;}
