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; }