为什么Chrome不能正确处理添加jQuery的flexbox项目？ [英] Why does Chrome not properly handle flexbox items added with jQuery?

问题描述

我在研究一些基本的Flexbox代码时，当我注意到Chrome添加了弹性项目并且容器的方向设置为 column 或列反向。这里有一个简单的flexbox示例，它可以将方向设置为列并打包​​：

  #flexbox_container {border：8px solid #ccc;填充：10px; height：200px;显示：flex;挠曲方向：柱; flex-wrap：wrap;}。flex_item {background：#eee; margin：4px; padding：10px;}  

< div id =flexbox_container > < div class =flex_item>项目< / div> < div class =flex_item>项目< / div> < div class =flex_item>项目< / div> < div class =flex_item>项目< / div> < div class =flex_item>项目< / div> < div class =flex_item>项目< / div> < div class =flex_item> Item< / div>< / div>

正如预期的那样，当列数增长过大而不适合容器时，会创建第二列，每个项目具有相同的宽度。

现在，这是一个问题的例子。如果我们从一列的子flex项开始，并使用jQuery继续添加更多，而不是像上面那样均匀分割，那么第一列将占用全部宽度，并且新项向旁边戳：

（$（'button'））。click（function（）{$（'＃flexbox_container'）。append（'< div class =flex_item> Item< / div>'）;}）

  #flexbox_container {border：8px solid #ccc;填充：10px; height：200px;显示：flex; flex-direction：列; flex-wrap：wrap;}。flex_item {background：#eee; margin：4px; padding：10px;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div id =flexbox_container> < div class =flex_item> Item< / div>< / div>< button>按钮< / button>

然后让我困惑的是，如果我摆弄几乎任何CSS属性，我可以让Chrome排队并显示flex项目，就像我期望的那样（就好像这样重新绘制或重新计算布局）。例如，在插入新项目后，我在这里快速更改Flex项目的位置：

$（'button'）>

< ）.click（function（）{$（'＃flexbox_container'）。append（'< div class =flex_item> Item< / div>'）; $（'。flex_item'）。css（'position' ，'absolute'）setTimeout（function（）{$（'。flex_item'）。css（'position'，'relative'）}，0）}）

< pre class =snippet-code-css lang-css prettyprint-override> #flexbox_container {border：8px solid #ccc;填充：10px; height：200px;显示：flex; flex-direction：列; flex-wrap：wrap;}。flex_item {background：#eee; margin：4px; padding：10px;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div id =flexbox_container> < div class =flex_item> Item< / div>< / div>< button>按钮< / button>

现在这显然是一种解决问题的方法，每次添加新项目时都会导致难看的闪烁。

为什么Chrome浏览器在插入jQuery时不能正确显示flex项目，而不必诉诸于对CSS属性的快速修改？

<请注意，Firefox和Edge都没有这个问题，并按预期工作，并且添加 -webkit - 前缀不会改变结果。此外，这似乎只发生在 flex-direction 设置为列或列时-reverse 。当它被设置为 row 或 row-reverse 时，它可以正常工作。

解决方案

有趣。您可以通过添加这些样式来解决问题：

  #flexbox_container {
 overflow：auto; 
} 
 
 #flexbox_container ::  -  webkit-scrollbar {
 height：0; 
} 
  

花了一段时间才发现滚动条的高度需要为0 。

单独使用 overflow ，Chrome似乎做了以下事情：

1. 添加一个元素。


2. 添加滚动条（如果需要的话）。
   
3. 认识到这是一个flexbox并且它不需要滚动条。
   
4. 错误地将列中的最后一个元素放置到下一列的顶部。

移除滚动条CSS以查看我在说什么。

$（data-hide =true>

'button'）。click（function（）{$（'＃flexbox_container'）。append（'< div class =flex_item> Item< / div>'）;}）

#flexbox_container {border：8px solid #ccc;填充：10px; height：200px;显示：flex; flex-direction：列; flex-wrap：wrap; overflow：auto;}＃flexbox_container :: - webkit-scrollbar {height：0;}。flex_item {background：#eee; margin：4px; padding：10px;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div id =flexbox_container> < div class =flex_item> Item< / div>< / div>< button>按钮< / button>

I was working on some basic flexbox code when I noticed that Chrome showed odd behavior when I added flex items and the direction of the container was set to column or column-reverse. Here's a simple flexbox example of things working properly with the direction set to column and wrapping on:

#flexbox_container {
    border: 8px solid #ccc;
    padding: 10px;
    height: 200px;
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
}
.flex_item {
    background: #eee;
    margin: 4px;
    padding: 10px;
}

<div id="flexbox_container">
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
</div>

As expected, when the number of columns grows too large to fit the container, a second column is created with each item having equal width.

Now here's an example of the problem. If we start out with one column's worth of child flex items and use jQuery to keep adding more, instead of them being evenly divided as above, the first column takes up the full width, and the new items poke out to the side:

$('button').click(function() {
  $('#flexbox_container').append('<div class="flex_item">Item</div>');
})

#flexbox_container {
  border: 8px solid #ccc;
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flexbox_container">
  <div class="flex_item">Item</div>
</div>
<button>button</button>

What then confuses me is that if I fiddle with almost any CSS property, I can get Chrome to fall in line and display the flex items as I would expect them to (almost as if this redraws or recalculates the layout). For example, here I change the position of the flex items quickly after inserting a new item:

$('button').click(function() {
  $('#flexbox_container').append('<div class="flex_item">Item</div>');
  $('.flex_item').css('position', 'absolute')
  setTimeout(function() {
    $('.flex_item').css('position', 'relative')
  }, 0)
})

#flexbox_container {
  border: 8px solid #ccc;
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flexbox_container">
  <div class="flex_item">Item</div>
</div>
<button>button</button>

Now that's obviously a hacky way to fix things and it causes an ugly flicker every time you add a new item.

So why does Chrome not display the flex items properly when they're inserted with jQuery, without having to resort to something like a quick modification to a CSS property?

Notice that neither Firefox nor Edge have this issue and work as expected, and adding -webkit- prefixes doesn't change the result. Also, this only seems to occur when the flex-direction is set to column or column-reverse. When it's set to row or row-reverse it works fine.

解决方案

Interesting. You can fix the problem by adding these styles:

#flexbox_container {
  overflow: auto;
}

#flexbox_container::-webkit-scrollbar {
  height: 0;
}

Took a while to figure out that the height of the scrollbar needed to be 0.

Using overflow alone, Chrome seemed to do the following:

1. Add an element.
2. Add a scrollbar if needed.
3. Realize that this was a flexbox and it didn't need a scrollbar.
4. Incorrectly position the last element in a column to the top of the next column.

Remove the scrollbar CSS to see what I'm talking about.

$('button').click(function() {
  $('#flexbox_container').append('<div class="flex_item">Item</div>');
})

#flexbox_container {
  border: 8px solid #ccc;
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}
#flexbox_container::-webkit-scrollbar {
  height: 0;
}
.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flexbox_container">
  <div class="flex_item">Item</div>
</div>
<button>button</button>

这篇关于为什么Chrome不能正确处理添加jQuery的flexbox项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！