ダイナミックパディングとアイテム数のあるFlexboxのサイズが正しく調整されていない

Question

アイテムがウィンドウサイズに応じてパディングで動的に変更されるフレックスボックスを作成しました。残念ながら、私は行の項目の量を制御することができませんが、時折間違って正しく整列する状態の間に戻って行きます。私は非常にコードのどこかにタイプミスがあると確信しています。私は時々アイテムの量を選択すると、私は通常それをマイナス1にします。

Codepen：http://codepen.io/anon/pen/zKPxBx

$('#slider1, #slider2').change(function(event, ui) { 
 
    setItemsOnRow(parseInt($('#slider1').val()), parseInt($('#slider2').val())); 
 
    console.log($('#slider1').val() + " " + $('#slider2').val()) 
 
}); 
 

 

 
function setItemsOnRow(itemCount, paddingSize) { 
 
    const offset = 0; 
 
    var innerWidth = $(window).innerWidth() - paddingSize * (itemCount + 1); 
 
    console.log("body: " + innerWidth); 
 
    var maxItemWidth = innerWidth/itemCount - offset; 
 
    var maxItemHeight = maxItemWidth; 
 

 
    // All items 
 
    $('.item') 
 
    .css("margin-top", paddingSize) 
 
    .css("margin-left", paddingSize/2) 
 
    .css("margin-right", paddingSize/2) 
 
    .height(maxItemHeight) 
 
    .width(maxItemWidth); 
 
    $('.item:nth-child(' + itemCount + 'n+1)') 
 
    .css("margin-right", paddingSize/2) 
 
    .css('margin-left', paddingSize) 
 
    $('.item:nth-child(' + itemCount + 'n-' + itemCount + ')') 
 
    .css("margin-right", paddingSize); 
 

 
}

.control { 
 
    width: 100%; 
 
    background: red; 
 
} 
 
.container { 
 
    width: 100%; 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
    flex-wrap: wrap; 
 
} 
 
.item { 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    transition-property: all; 
 
    transition-duration: 0.45s; 
 
    transition-timing-function: ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control"> 
 
    <label for="slider1">Items</label> 
 
    <input id="slider1" type="range" min="0" max="10" step="1" value="0" /> 
 
    <br/> 
 
    <label for="slider2">Padding</label> 
 
    <input id="slider2" type="range" min="0" max="50" step="5" value="0" /> 
 
</div> 
 
<div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
</div>

Answer 1

あなたの項目のほとんどは、このようなものがあります：

element.style { 
    margin-left: 7.5px; 
    margin-right: 7.5px; 
} 

をしかし、いくつかの項目は、この持っている：

element.style { 
    margin-left: 15px; 
    margin-right: 7.5px; 
} 

を

またはこの：

element.style { 
    margin-left: 7.5px; 
    margin-right: 15px; 
} 

はもちろん、アイテムがラップするとき、これらの不均一な余白の設定項目が不整列するようになります。

列を揃えるには、左右の余白をすべての項目で同じにする必要があります。

（上に掲載された余白値は、あなたのアプリの特定の設定のもので、パディング設定によって変化しますが、パターンは安定しています： ）