顯示后在 flex 布局中重新顯示 div:none

Question

我有兩個旁邊的 div（基本上是兩個側欄），必須隱藏它們才能啟用中央 div main的“全屏”，我使用 flexbox 來分配屏幕的比例，但是，在將元素重新顯示為display : block ，它完全破壞了原來的布局。 隱藏和顯示的代碼如下。 我正在使用 d3 進行 DOM 操作。

function handlefullscreen(){
    if(d3.select("#fullscreen").attr("data-selected") == 1){
        d3.select("#fullscreen").attr("data-selected", 0);
        d3.selectAll(".aside")
            .style("display", "block")
            .transition()
            .ease(d3.easeCubic)
            .duration("250")
            .style("opacity", 1).on("end",
                redraw);
    } else{
        previousWidth = document.getElementById('left').offsetWidth;
        d3.select("#fullscreen").attr("data-selected", 1);
        d3.selectAll(".aside")
            .transition()
            .ease(d3.easeCubic)
            .duration("250")
            .style("opacity", 0)
            .on("end", function(){
                d3.select(this).style("display", "none"); 
                redraw();
            });
    }
}

下面是我用於 flex 元素的 CSS：

     .wrapper {
         height: 100%;
         margin: 0 -10px;
         display: flex;  
         flex-flow: row wrap;
         font-weight: bold;
         text-align: center;
     }

     .wrapper > * {
         padding: 0px;
     }

     .main {
         background: #ffffff;
     }

     .aside-1 {
         box-shadow:5px 1px 6px #4E565E;
         background: #d8d8d8;
         z-index: 1;
     }

     .aside-2 {
         margin: 0 0px;
         box-shadow:-5px 1px 6px #4E565E;
         background: #d8d8d8;
     }

     @media all and (min-width: 600px) {
         .aside { flex: 1 20%; }
     }

     @media all and (min-width: 800px) {
         .main    { flex: 3 60%; }
         .aside-1 { order: 1; } 
         .main    { order: 2; }
         .aside-2 { order: 3; }
     }

Answer 1

您應該將顯示塊更改為顯示 flex。

d3.selectAll(".aside")
        .style("display", "flex")
        .... // rest of the code

請記住，flex 是顯示屬性的另一種模式。

希望這可以幫助