Question

我在弹性框容器中有三列，两个可见，一个隐藏。前两个内容很少;第三个有几页内容。我希望这三个最初都是垂直居中的，但是由于第三个会从页面溢出，我希望它（当显示时）最终填充到页面顶部然后向下滚动。如何以这种方式自然溢出的柔性盒中居中物品？

现在我的代码中发生的事情是，当第三列可见时，它从页面的顶部和底部溢出，没有滚动，因此无法读取内容的第一部分

HTML：

<div class="flex-container">
    <div class="column column-left">
            column one
    </div>
    <div class="column column-right">
        column two      
    </div>
    <div class="column-hidden column" data-id="1">
      column three
    </div> 
</div>

CSS：

body{
    margin:0;
}

html, body{
height: 100%;
}

.flex-container{
height: 100%;
display: -webkit-flex;
   display: flex;
-webkit-flex-direction: row;
   flex-direction: row;
-webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
} 

.column{
    padding: 0 1em 0 1em;
}


.column-left{
    display: visible;
}
.column-right{
    display: visible;
    border: none;
    text-align: left;
}

.column-hidden{
   display: none;
}

使用Javascript：

//clicking on button does the following to show hidden column 
$('.column-left').removeClass('column-left').addClass('column-hidden');
$('.column-right').removeClass('column-right').addClass('column-left');
$(".column[data-id='" + id + "']").addClass('column-right').removeClass('column-hidden');

Answer 1

使用您的代码。我将align-items从.flex-container重新排列为.column，这也是display: flex;。对于滚动，我认为您应该为内容添加额外的绝对容器..我使用了P。

此处示例http://codepen.io/vkjgr/pen/gpqLLZ

P.S。有关您的代码的一些提示。 flex-direction的初始值为row，因此您不必编写它。 visible不属于display;）

带有display = none元素的居中弹性框导致屏幕溢出不可读

1 个答案: