使用flex [duplicate]在窗口底部放置一個元素或一個框

[英]placing an element or a box on the bottom of window using flex [duplicate]


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>

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



 
粤ICP备14056181号  © 2014-2020 ITdaan.com