Flexbox。对齐项目中心不忽略填充

如何使flex子不重叠顶部填充？Flexbox。对齐项目中心不忽略填充

在这个例子中，儿童.large居中居中，但由于身高较大，其顶部位于其父母的顶部边界之上。有没有办法来防止这种情况，并使.large后.flex填充顶部没有JS？ flex-start将是一个不好的解决方案，因为.flex内的块可以有很小的高度，并且必须位于.flex的中心。 .flex必须定位为absolute或fixed。

https://jsfiddle.net/zoxamy9f/1/

.large { 
 
    background: red; 
 
    height: 200%; 
 
    flex: 1; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.flex { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    padding-top: 10%; 
 
    height: 100%; 
 
    background: black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: auto; 
 
}

<div class="flex"> 
 
    <div class="large"></div> 
 
</div>

来源

2017-06-14 Herrgott

也许我不理解不够好，但基本上，如果你有一个以％表示的宽度和高度，你不能在％使用填充。尝试在'px'中给宽度和高度一个固定值。 –

如果添加flex和large之间的包装，你能够做到这

我还用视单位vh代替%，因为％将无法正常工作，使垂直居中。

Fiddle demo

堆栈段 - 太多的内容

.wrapper { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: calc(100% - 10vh); 
 
    justify-content: center; 
 
} 
 
.large { 
 
    background: red; 
 
    width: 100%; 
 
} 
 
.flex { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    padding-top: 10vh; 
 
    height: 100%; 
 
    background: black; 
 
    overflow: auto; 
 
    box-sizing: border-box; 
 
}

<div class="flex"> 
 
    <div class="wrapper"> 
 
    <div class="large"> 
 
     Content 1 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
    </div> 
 
    </div> 
 
</div>

堆栈段 - 含量甚微

.wrapper { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: calc(100% - 10vh); 
 
    justify-content: center; 
 
} 
 
.large { 
 
    background: red; 
 
    width: 100%; 
 
} 
 
.flex { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    padding-top: 10vh; 
 
    height: 100%; 
 
    background: black; 
 
    overflow: auto; 
 
    box-sizing: border-box; 
 
}

<div class="flex"> 
 
    <div class="wrapper"> 
 
    <div class="large"> 
 
     Content 1 
 
     <br> Content 
 
     <br> Content 
 
     <br> Content 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-14 14:37:53 LGSon

是否有可能，你可以改变你的结构是这样的机会吗？

.large { 
 
    background: red; 
 
    height: 200%; 
 
    flex: 1; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.wrap { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: black; 
 
} 
 

 
.flex { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-top: 10%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: hidden; 
 
}

<div class="wrap"> 
 
    <div class="flex"> 
 
    <div class="large"></div> 
 
    </div> 
 
</div>

来源

2017-06-14 14:14:18

Flexbox。对齐项目中心不忽略填充

回答

相关问题