This question already has an answer here:
這個問題在這里已有答案:
Using flexbox, how can I move the .bottom
div to the bottom of the window? The flex-direction
of the .boxContainer
is column
so that everything can be moved vertically. I tried align-self: flex-end
and align-self: baseline
but both just pushed the box horizontally, not vertically. I hope someone could help me fix this.
使用flexbox,如何將.bottom div移動到窗口底部? .boxContainer的flex方向是列,以便可以垂直移動所有內容。我嘗試了align-self:flex-end和align-self:baseline,但兩者都只是水平推動盒子,而不是垂直推動盒子。我希望有人可以幫我解決這個問題。
.boxContainer {
width: 100vw;
height: 100vh;
background: peachpuff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.center {
width: 300px;
height: 150px;
background: honeydew;
}
.bottom {
width: 300px;
height: 50px;
background: cyan;
align-self: flex-end;
}
<div class="boxContainer">
<div class="center"></div>
<div class="bottom"></div>
</div>
1
You could change the justify-content to space-between and it should do the trick for you.
您可以將justify-content更改為space-between,它應該為您完成。
In case, you dont need the center div to be pushed up, You could set the margin-top auto to both center and bottom divs.
如果您不需要向上推中心div,您可以將margin-top auto設置為中心和底部div。
.boxContainer {
width: 100vw;
height: 100vh;
background: peachpuff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.center {
width: 300px;
height: 150px;
background: honeydew;
margin-top: auto;
}
.bottom {
width: 300px;
height: 50px;
background: cyan;
margin-top: auto;
}
<div class="boxContainer">
<div class="center"></div>
<div class="bottom"></div>
</div>
0
Try replacing align-self: flex-end;
with align-content: flex-end;
add margin-top: auto
on .bottom
class.
嘗試替換align-self:flex-end; with align-content:flex-end;在.bottom類上添加margin-top:auto。
.boxContainer {
width: 100vw;
height: 100vh;
background: peachpuff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.center {
width: 300px;
height: 150px;
background: honeydew;
}
.bottom {
width: 300px;
height: 50px;
background: cyan;
align-content: flex-end;
margin-top: auto;
}
<div class="boxContainer">
<div class="center"></div>
<div class="bottom"></div>
</div>
本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/11/27/72089d87ea1da117bbed4eb051dc6c6.html。