將特定高度設置爲彈性項目

Question

我有3個彈性項目：標題，內容和頁腳。我希望一切都能夠彎曲，但頭部正好是250px ...我添加了一個樣式.height-250 {max-height: 250px;}，但它不起作用。

/* GRID */ 
 
.grid { 
 
    display: flex; 
 
} 
 
.col { 
 
    background-color: rgba(100, 255, 255, 0.1); 
 
    border: 1px solid rgb(100, 255, 225); 
 
    padding: 5px; 
 
} 
 
.col-1-12 { 
 
    flex-basis: 8.3333%; 
 
} 
 
.col-2-12 { 
 
    flex-basis: 16.6666%; 
 
} 
 
.flex-column { 
 
    flex-direction: column; 
 
} 
 
.full-width { 
 
    flex-grow: 100; 
 
} 
 
.wrapper, 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.height-250 { 
 
    max-height: 250px; 
 
}

<div class="wrapper grid flex-column"> 
 
    <div class="col col-1-12 height-250">Header</div> 
 
    <div class="grid col full-width col-2-12">Content</div> 
 
    <div class="col col-1-12">Footer</div> 
 
</div>

Answer 1

而不是max-height: 250px你應該使用flex: 0 0 250px與flex-direction: column它將設置元素的高度250像素。

.grid { 
 
    display: flex; 
 
} 
 
.col { 
 
    background-color: rgba(100, 255, 255, 0.1); 
 
    border: 1px solid rgb(100, 255, 225); 
 
    padding: 5px; 
 
} 
 
.col-1-12 { 
 
    flex-basis: 8.3333%; 
 
} 
 
.col-2-12 { 
 
    flex-basis: 16.6666%; 
 
} 
 
.flex-column { 
 
    flex-direction: column; 
 
} 
 
.full-width { 
 
    flex-grow: 100; 
 
} 
 
.wrapper, 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.height-250 { 
 
    flex: 0 0 250px; 
 
}

<div class="wrapper grid flex-column"> 
 
    <div class="col col-1-12 height-250">Header</div> 
 
    <div class="grid col full-width col-2-12">Content</div> 
 
    <div class="col col-1-12">Footer</div> 
 
    </div