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。對齊項目中心不忽略填充

回答

相關問題