Java Flex的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屬性（我使用了Array，因此，如果我想添加其他框，則只需將其添加到Array中，然后整個頁面會自行調整）。

重要的是，我還做了：

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。

我的問題是，當我希望保留“ click”目標元素而另一個元素淡出時，我希望使用：

element.style.display = "none";

而不是這樣的：

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

顯示內容=“ none”; 剩下的要素行為異常。 它在一兩個框架中向左和向右關閉，並在其他兩個元素消失后在中間結束。

所以我想知道，我的問題是否來自for循環？

有沒有一種方法可以固定3個元素的位置，並且即使在除去其他與撓曲相關的元素之后也保持該位置？

Answer 1

Flex將根據其必須處理的可見內容來計算項目的位置和布局，這就是為什么您注意到使用display: none;時事情變得很奇怪的原因display: none; 在某些元素上。

您可以基於nth-child應用一些巧妙的邊距，以允許您使用顯示功能：但是，沒有一個，到那時，您將失去Flexbox的優勢。

如果是我，我將在視覺上隱藏元素，而不是使用display屬性。