https://i.stack.imgur.com/e2n5o.png
我想通過 flexbox 實作這樣的布局。body是彈性容器，只有兩個彈性專案，一張卡片和一個頁腳。這是一個簡化的 codepen 鏈接。我怎樣才能在頁面底部制作頁腳，而卡片位置現在居中。
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 400px;
height: 300px;
background-color: green;
}
.footer {
margin-bottom: 20px;
background-color: yellow;
width: 200px;
height: 50px;
}<div class="container"></div>
<div class="footer"></div>如果我添加margin-top:auto，頁腳的位置將是正確的，但容器將到頂部。
如果我添加gap到body，容器將不會在中心
uj5u.com熱心網友回復：
為綠卡使用另一個元素，并使用.container填充所有可用空間flex-grow: 1。
使用display: flex和align-items:center對.container垂直居中卡。
body{
display:flex;
flex-direction:column;
align-items:center;
height:100vh;
}
.container{
flex-grow: 1;
display: flex;
align-items: center;
}
.card {
width:400px;
height:300px;
background-color:green;
}
.footer{
margin-bottom:20px;
background-color:yellow;
width: 200px;
height:50px;
}<div class="container">
<div class="card"></div>
</div>
<div class="footer"></div>身體不需要，justify-content:center;所以你也應該洗掉它。
uj5u.com熱心網友回復：
您可以使用grid將容器居中，并使用 position 來粘貼頁腳。
body {
display: grid;
place-content: center; /* center the container */
height: 100vh;
margin: 0;
}
.container {
width: 400px;
height: 300px;
background-color: green;
}
.footer {
justify-self: center; /* center the footer */
margin-bottom: 20px;
background-color: yellow;
width: 200px;
height: 50px;
/* push the footer to the bottom */
position: sticky;
top: 100vh;
}<div class="container"></div>
<div class="footer"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386910.html
上一篇：在卡片上應用負邊距以達到砌體效果