Javascript的CSS Flex问题，for循环中的element.style.display =“none”

Question

我声明了一个数组：

var listChoices = [
    {nom: "Moi"},
    {nom: "Experiences"},
    {nom: "Savoir-Faires"}
];

我想将 html/css 页面中的这些选项显示到屏幕中间的 X 框中，这些框将在访问者的交互（主要是点击）下进行交互。

所以我基本上使用Javascript来创建一个对象

var Choice = {}

我希望为这 3 个选项显示所有 CSS 属性（我使用一个数组，因此如果我想添加另一个框，我只需将其添加到数组中，整个页面就会自行调整） .

重要的是，我也做过：

document.body.style.display = "flex";
document.body.style.justifyContent = "space-around";

我的问题：

我使用一个for循环来创建基于listChoices的三个Choice对象，比如：

for(var i = 0; i < listChoices.length; i += 1) {
    var choice = object.create(Choice);
    choice.style();
    choice.init();
    choice.logs();
    choice.react();
}

我基本上是把我在Choice.style中先写的CSS属性放到了新创建的3个choice对象中。然后我创建 3 并将它们与 Choice.init 一起放置。那么Choice.react就是在这里使用我写的函数对三个元素进行fade、moveDown和moveCenter。

我的问题是，当我希望“点击”目标元素保留而另一个消失时，我更喜欢使用：

element.style.display = "none";

而不是类似的东西：

element.style.background = "transparent"; or element.style.background = "inherit";

显示的东西 = "none";是剩余的元素行为怪异。它在一两帧中左右关闭，在其他两个元素消失后在中间结束。

所以我想知道，我的问题是否来自 for 循环？

有没有办法固定 3 个元素的位置，即使在其他与 flex 相关的元素被移除后也能保持这个位置？

Answer 1

Flex 将根据必须处理的可见内容计算项目的位置和布局，这就是为什么在某些元素上使用 display: none; 时会发现事情变得奇怪的原因。

您可以基于nth-child 应用一些巧妙的边距，以便允许您使用 display: none，但是，此时您将错过 Flexbox 的好处。

如果是我，我会在视觉上隐藏元素而不是使用 display 属性。