假定分成a,b,c三個區塊，body為最外層，隨視窗變化height:100%，a與c為頭尾，固定某一高度，b能浮動撐開剩餘的高度?如果只有一個b用js抓去分配還好，但要是結構複雜時區塊很多，感覺不是太好的方式。像三個區塊計算大概是b=全高-a-b;，一直去算這個感覺不是太好的方式?
<style>
html {
height:100%;
}
body{
height:100%;
margin: 0px;
}
.a{
width:100%;
height: 40px;
background-color: aquamarine;
}
.b{
background-color: rgb(255, 127, 127);
}
.c{
width:100%;
height: 40px;
background-color: rgb(255, 127, 212);
}
<style>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
已邀請的邦友 {{ invite_list.length }}/5
https://jsfiddle.net/6Lxgz918/
這樣是你要的嗎?
flex-direction: column;的作用是讓flex的延展變成上下的?
flex-direction控制方向，他有六個值你可以上下面網址看看
https://www.w3schools.com/cssref/css3_pr_flex-direction.asp
嗯嗯我是說我以為只是排列的方向，所以也會影響延伸的方向
.flex-container {
display: flex;
flex-direction: column;
}
.flex-item:nth-of-type(1) {
flex-grow: 1;
}
.flex-item:nth-of-type(2) {
flex-grow: 2;
}
/* other styling */
html, body {
background-color: black;
}
.container {
margin: auto;
width: 520px;
height: 650px;
border: 5px solid #FF7F27;
border-radius: 10px;
padding: 5px;
}
.item1 {
width: 100px;
border: 5px solid #B5E61D;
border-radius: 100%;
margin: 5px;
color: #B5E61D;
line-height: 100px;
text-align: center;
font-size: 30px;
}
.item2 {
width: 100px;
height: 400px;
border: 5px solid #B5E61D;
border-radius: 100%;
margin: 5px;
color: #B5E61D;
line-height: 100px;
text-align: center;
font-size: 30px;
}
<div class="flex-container container">
<div class="flex-item item1">1</div>
<div class="flex-item item2">2</div>
</div>
iThome鐵人賽
看影片追技術