flex-wrap不兼容解决方案

[semi-xi]

其实之前也一直有在移动端中使用flex的布局，但是发现有些机子是不兼容的。当时一直都没有去细看到底是那个不兼容，昨天用的时候仔细去留意了一下。目前发现的话是一台华为荣耀6P 系统版本emui3，他能兼容flex布局，但是不兼容flex-wrap布局。

在网上找了不少答案，其中在amazeui的一个issue里面提到了一个给子元素增加inline-block是可以解决的。我试的时候，发现确实是可以做到了换行，但是布局还是错的。这样的话我想起了利用text-align:justify的办法，最后也是这么解决的，但是缺点是需要多些一个justify的类名的标签来占位，具体这个是怎么做的话可以去看下张鑫旭的博客。这里不再详细说明。

.section-panel {
    width: 6.07rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 0.15rem;
    text-align: justify;
    font-size: 0;
    li {
        width: 2.82rem;
        margin-bottom: 0.25rem;
        overflow: hidden;
        display: inline-block;
        .justify {
            margin: 0;
        }
    }
}

<ul class="section-panel">
    <li>
        <img src="http://xxx/282x250" alt="">
        <span><i>唐伯虎点秋香</i></span>
    </li>
    <li>
        <img src="http://xxx/282x250" alt="">
        <span><i>唐伯虎点秋香</i></span>
    </li>
    <li>
        <img src="http://uxxx/282x250" alt="">
        <span><i>唐伯虎点秋香</i></span>
    </li>
    <li>
        <img src="http://xxx282x250" alt="">
        <span><i>唐伯虎点秋香</i></span>
    </li>
    <li class="justify"></li>
</ul>