How can I use flexbox to make two items one center one bottom

user_16297447 0
Viewed 765

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

I want to achieve a layout like this by flexbox. body is flex container and there are only two flex items, one card and one footer. Here is a simplified codepen link. How can I make the footer at the bottom of the page while the card position center as it is now.

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>

if I add margin-top:auto, the footer's position will be right, but the container will go to the top.

if I add gap to body, the container will not be at the center

flexbox css
2 Answers

Use another element for the green card and make the .container fill all the available space using flex-grow: 1.

Use display: flex and align-items:center on the .container to center the card vertically.

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>

The body does not need justify-content:center; so you should remove it too.

Another approach if you want that .container to have 100% width.

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>

user_82921780

You can use grid to center the container, and position to stick the footer.

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>

user_55616050
Related