如何使用 flexbox 使两个项目一个中心一个底部

Posted

技术标签:

【中文标题】如何使用 flexbox 使两个项目一个中心一个底部【英文标题】:How can I use flexbox to make two items one center one bottom 【发布时间】:2022-01-21 15:20:34 【问题描述】:

https://i.stack.imgur.com/e2n5o.png

我想通过flexbox实现这样的布局。 body 是弹性容器,只有两个弹性项目,一张卡片和一个页脚。这是simplified codepen link。如何在卡片位置居中时将页脚放在页面底部。

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,容器将不在中心

【问题讨论】:

【参考方案1】:

为绿卡使用另一个元素并使用flex-grow: 1 使.container 填充所有可用空间。

.container 上使用display: flexalign-items:center 使卡片垂直居中。

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>

body 不需要justify-content:center;,所以你也应该删除它。

如果您希望 .container 具有 100% 宽度,则另一种方法。

body 
  display: flex;
  flex-wrap: wrap;
  height: 100vh;


.container 
  width: 100%; /* NEW */
  
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;  /* NEW */


.card 
  width: 400px;
  height: 300px;
  background-color: green;


.footer 
  margin-bottom: 20px;
  background-color: yellow;
  width: 200px;
  height: 50px;
  margin: auto; /* NEW */
<div class="container">
  <div class="card"></div>
</div>
<div class="footer"></div>

【讨论】:

【参考方案2】:

您可以使用grid 使容器居中,并定位以粘贴页脚。

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>

【讨论】:

以上是关于如何使用 flexbox 使两个项目一个中心一个底部的主要内容,如果未能解决你的问题,请参考以下文章

CSS Flexbox - 在两个 div 之间居中一个 div [重复]

Flexbox 中心在 Safari 中不起作用

CSS:flexbox的第一个孩子向左并休息到中心[重复]

如何使 flexbox 项目的大小相同?

如何使网格列表中的每一行具有相同数量的项目(使用 Flexbox)? [复制]

如何使 flexbox 响应式?