flex的出现极大方便了前端页面布局，随着浏览器发展，现在pc版浏览器对flex的兼容性也很好，所以在给客户网站中开始默认使用flex，本文将记录平时工作中常用的flex使用姿势。
1、实现自动排版
例图：
代码：
//HTML
<ul class="listMenu">
<li><a href="#" title="索尼系列">索尼系列</a></li>
<li><a href="#" title="凯创网络系列">凯创网络系列</a></li>
<li><a href="#" title="CM数字系列">CM数字系列</a></li>
<li><a href="#" title="凯创拓达">凯创拓达</a></li>
<li><a href="#" title="海康威视">海康威视</a></li>
<li><a href="#" title="日立模组">日立模组</a></li>
</ul>
//CSS
.listMenu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.listMenu li {
padding-right: 5px;
padding-bottom: 5px;
flex-grow: 1;
flex-shrink: 1;
min-width: 85px;
}
.listMenu li a {
display: block;
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
text-align: center;
font-size: 14px;
color: #333;
background: #f5f5f5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
}