CSS for 循环中 Javascript、element.style.display = "none" 的 Flex 问题

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

我的问题是，当我希望 "click" 目标元素保留而另一个淡出时，我更愿意使用：

element.style.display = "none";

而不是像这样的东西：

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

有显示的东西="none"；是剩下的元素表现得很奇怪。它在一两帧中左右关闭，并在其他两个元素消失后在中间结束。

所以我想知道，我的问题是不是出在for循环上？

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

Answer 1

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

您可以根据 nth-child 应用一些巧妙的边距，以允许您使用显示：none，但是，到那时您将错过弹性框。

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

CSS for 循环中 Javascript、element.style.display = "none" 的 Flex 问题

CSS Flex issue with Javascript, element.style.display = "none" in a for loop

javascript

css

loops

flexbox

display