使用flex [duplicate]在窗口底部放置一個元素或一個框
[英]placing an element or a box on the bottom of window using flex [duplicate]
This question already has an answer here:
這個問題在這里已有答案：
- In CSS Flexbox, why are there no “justify-items” and “justify-self” properties? 5 answers
- 在CSS Flexbox中，為什么沒有“justify-items”和“justify-self”屬性？ 5個答案
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>2 个解决方案
#1
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>#2
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。