小编Tim*_*Tim的帖子

我遇到了Safari在flexbox行的第一个元素左边添加1px边距/间隙的问题.我在问题下方附上了一张图片:

flex box css是:

.equal-height {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-direction: row;
        flex-wrap: wrap;
    }

子元素设置如下:

.child-div {
    float: left;
    display: block;
    width: 33.3333%;
    box-sizing: border-box;
}

但他们我注意到他们的计算没有浮动

我正在尝试重新排序以下 div，以便根据其数据值将它们放置在正确的顺序（s，m，l，xl）中。

<div class="size-swatches">
    <div class="swatch size" data-value="m"></div>
    <div class="swatch size" data-value="s"></div>
    <div class="swatch size" data-value="xl"></div>
    <div class="swatch size" data-value="l"></div>
</div>

对于数值数据（8、10、12 等），我一直在使用以下脚本，但我不确定如何处理 s、m、l、xl

var $wrapper = $('.size-swatches');
$wrapper.find('.swatch').sort(function(a, b) {
    return +a.dataset.value - +b.dataset.value;
})
.appendTo($wrapper);

目标是像这样对 div 进行排序：

<div class="size-swatches">
    <div class="swatch size" data-value="s"></div>
    <div class="swatch size" data-value="m"></div>
    <div class="swatch size" data-value="l"></div>
    <div class="swatch size" data-value="xl"></div>
</div>