帶有動態填充和項目數的Flexbox沒有正確調整大小

我已經創建了一個flexbox，其中的項目應根據窗口大小動態地使用填充更改大小。不幸的是，有時我無法控制一排物品的數量，它隨機返回並且在正確排列的狀態和有時不正確的狀態之間。我非常確信代碼中存在一個錯字。當我有時選擇一定數量的項目時，我通常會減去一項。帶有動態填充和項目數的Flexbox沒有正確調整大小

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>

來源

2016-10-03 JavaCake

*當我有時選擇一定數量的項目時，通常我會減去一個*：我想你可以使用*'{box-sizing：border-box;}來解決這個問題 – kukkuz

你沒有分割paddingSize在這行中加2：'.css（'margin-left'，paddingSize）'。也可以考慮使用CSS counter（）函數來計算項目數量，它會讓你的生活更輕鬆。 – Ricky

你大部分的項目是這樣的：

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; 
}

顯然，當物品包裹，這些不均勻的頁邊距設置會導致項目錯位。

對於要對齊的列，所有項目的左右邊距必須相等。

（上面列出的邊距值是針對您應用中的一個特定設置的，這些值根據填充設置而變化，但是模式是穩定的：某些項目具有相等的水平邊距，其他項目在左側或右側具有雙倍）

來源

2016-10-03 14:34:33

帶有動態填充和項目數的Flexbox沒有正確調整大小

回答

相關問題