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个选择对象中。然后我创建3并将它们与Choice.init放在一起。然后Choice.react在这里使用我写的函数淡入淡出，moveDown和moveCenter三个元素。

我的问题是，当我想要＆＃34;点击＆＃34;目标元素保留，另一个淡出，我宁愿使用：

element.style.display = "none";

而不是像：

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

显示器=＆＃34;无＆＃34 ;;是剩下的元素怪异地行动。它在一两帧中左右快门，在另外两个元素消失后最终在中间。

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

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

Answer 1

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

您可以根据nth-child应用一些聪明的边距，以便您可以使用display：none，但是，此时您将错过Flexbox的好处。

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

使用Javascript的CSS Flex问题，element.style.display =＆＃34; none＆＃34;在for循环中

1 个答案: