CSS3 flex使用笔记

Marc 2021-08-24 15:05:59 65浏览

flex的出现极大方便了前端页面布局,随着浏览器发展,现在pc版浏览器对flex的兼容性也很好,所以在给客户网站中开始默认使用flex,本文将记录平时工作中常用的flex使用姿势。

1、实现自动排版

例图:

image.png

代码:

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


标签:
最后修改: 2021-08-24 15:15:02

非特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:https://www.imarc.cn/web/14.html