关于 flex 基础部分就不多讲了, 下面介绍一些使用中常见问题解决方案:

flex 下, 实现文本超过之后显示 ‘…’

1
2
3
4
5
6
7
8
9
10
11
12
.father {
    display: -webkit-flex;
    display: flex;
    white-space: nowrap;
}
.flex-child {
    overflow: hidden;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

flex 兼容性处理

1
2
3
4
5
6
7
8
9
10
.flex-wrap {
    display: flex;
    display: -webkit-flex;
    display: -webkit-box; /* 兼容旧版 flex */
    .flex-1 {
        flex: 1;
        -webkit-flex: 1;
        -webkit-box-flex: 1; /* 兼容旧版 flex */
    }
}