带有动态填充和项目数的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没有正确调整大小

回答

相关问题