Question

我创建了一个flexbox，其中的项目应根据窗口大小动态更改填充大小。不幸的是，有时我无法控制一行中的项目数量，它会随机返回并且在正确对齐状态和有时不正确状态之间。我非常确信代码中某处有拼写错误。当我有时选择一定数量的物品时，我通常会减去一个。

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

＆＃13;

$('#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);

}

＆＃13;

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

＆＃13;

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

＆＃13;

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

显然，当项目换行时，这些不均匀的边距设置会导致项目不对齐。

对于要对齐的列，左边距和右边距必须等于所有项目。

（上面公布的边距值适用于您应用中的一个特定设置。这些值会根据填充设置而变化。但是，模式是稳定的：某些项目具有相等的水平边距，其他项目左侧或右侧则为双倍。）

具有动态填充和项目计数的Flexbox未正确调整大小

1 个答案: