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是display属性的另一种模式。

希望这会有所帮助

显示后重新在Flex布局中重新显示div：无

1 个答案: