爲什麼我的CSS網格在其祖先顯示時收縮：flex？

Question

當下面的代碼中的祖先是display: block時，它按照預期工作。當它是display: flex嵌套網格縮小。

我想了解爲什麼會發生這種情況。

只需在下面的代碼中取消註釋display: block即可查看結果。電網停下來跨越允許的整個區域。

.ctnr{ 
 
    display: flex; 
 
    //display: block; 
 
    flex-flow: column; 
 
    align-items: stretch; 
 
} 
 
header{ background: red; height: 2rem; } 
 
main{ 
 
\t max-width: 15rem; 
 
\t height: 25rem; 
 
\t margin: auto; 
 
\t overflow: auto; 
 
} 
 

 
.grid{ 
 
    display: grid; 
 
\t height: 25rem; 
 
    align-items: stretch; 
 
    grid-template-areas: 
 
    "c1 c1 c1 c2 c3 c3 c3" 
 
    "c4 c4 c4 c4 c3 c3 c3" 
 
    "c4 c4 c4 c4 c5 c6 c6" 
 
    "c4 c4 c4 c4 c7 c7 c7"; 
 
\t grid-gap: 10px; 
 
} 
 
.grid article{ 
 
\t cursor: pointer; 
 
} 
 
.grid article:nth-child(odd){ 
 
    background: yellow; 
 
} 
 
.grid article:nth-child(even){ 
 
    background: cyan; 
 
} 
 
.c1{ grid-area: c1; } 
 
.c2{ grid-area: c2; } 
 
.c3{ grid-area: c3; } 
 
.c4{ grid-area: c4; } 
 
.c5{ grid-area: c5; } 
 
.c6{ grid-area: c6; } 
 
.c7{ grid-area: c7; }

<div class="ctnr"> 
 
    <header></header> 
 
    <main> 
 
    <div class="grid"> 
 
     <article class="c1">1</article> 
 
     <article class="c2">2</article> 
 
     <article class="c3">3</article> 
 
     <article class="c4">4</article> 
 
     <article class="c5">5</article> 
 
     <article class="c6">6</article> 
 
     <article class="c7">7</article> 
 
    </div> 
 
    </main> 
 
    <footer></footer> 
 
</div>

這是通過給予寬度主

main{ 
    width: 90%; 
    max-width: 15rem; 
    // ... 
} 

這種「決心」的問題解決了，但是我真的不明白這裏發生了什麼。例如，header即使沒有寬度也不縮小。

https://jsfiddle.net/6k2313ub/1/

Answer 1

這是你的問題的根源：

main { 
    max-width: 15rem; 
    height: 25rem; 
    margin: auto; 
    overflow: auto; 
} 

的main元素設置爲一個max-width: 15rem。

這留下了很多可用空間（100％ - 15rem）。

main元素也設置爲margin: auto。作爲main是一個flex項目，這條規則告訴它消耗線路上所有可用空間。這具有擠出所有空閒空間並將物品垂直和水平居中的效果。

但是，Flex自動邊距在塊佈局中不能像這樣工作，這就是爲什麼與display: block有不同的渲染差異。

如果您希望項目保持全寬，如塊佈局，請使用min-width而不是max-width。這確實的伎倆：

main { 
    min-width: 15rem; /* adjusted */ 
    height: 25rem; 
    margin: auto; 
    overflow: auto; 
} 

revised demo 1

OR，只需添加width: 100%。這也做的伎倆：

main { 
    width: 100%; /* new */ 
    max-width: 15rem; 
    height: 25rem; 
    margin: auto; 
    overflow: auto; 
} 

revised demo 2

所以，margin: auto使得柔性佈局有很大的區別。如果將相同的規則應用於標題，則會得到類似的結果。

revised demo 3

詳細瞭解這裏的柔性自動邊距：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?