我有两个侧边的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; }
     }