Flexbox mit dynamischer Polsterung und Anzahl der Elemente wird nicht korrekt skaliert

Question

Ich habe eine Flexbox erstellt, wo die Elemente dynamisch mit der Polsterung entsprechend der Fenstergröße ändern sollten. Leider bin ich manchmal nicht in der Lage, die Menge der Elemente in einer Zeile zu steuern, es wird nach dem Zufallsprinzip zurück und zwischen dem Zustand der Ausrichtung korrekt und manchmal falsch. Ich bin sehr davon überzeugt, dass es irgendwo im Code einen Tippfehler gibt. Wenn ich manchmal eine Menge von Gegenständen wähle, bekomme ich normalerweise minus eins.

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

Die meisten Ihrer Produkte haben so etwas wie dieses:

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

Aber einige Einzelteile haben diese:

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

oder dies:

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

Offensichtlich, wenn Elemente wickeln, diese ungleichmäßigen Randeinstellungen werden Elemente führen misalign.

Damit die Spalten ausgerichtet werden, müssen Ihre linken und rechten Ränder für alle Elemente gleich sein.

(Die oben angegebenen Randwerte beziehen sich auf eine bestimmte Einstellung in Ihrer App. Diese Werte ändern sich je nach Polstereinstellung. Das Muster ist jedoch stabil: Einige Elemente weisen gleiche horizontale Ränder auf, andere doppelte auf der linken oder rechten Seite .)