Position the flex item at the bottom of the container

Question

Position the flex item at the bottom of the container

Looking for a solution to create a container that takes up the full window height and width? Inside this container, I want to have a form that is centered both vertically and horizontally. Additionally, I want some text at the bottom baseline of the container. I'm currently struggling to achieve this layout as the vertical centering works but I can't figure out how to pin the bottom text to the bottom of the container.

---------
|       |
|       |
|<form>  |
|       |
|<copy>  |
---------

.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  padding: 1em;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

form {
  
}

.bot {
  align-self: flex-end;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
   </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

html css flexbox

Answer 1

Answer №1

Revised Response

Utilizing auto margins allows you to consolidate or arrange flex items without needing additional markup, or rearrange elements by applying a margin in the opposite direction (as illustrated in my initial response). To achieve this effect, simply apply margin: auto to the form; this will instruct the flex container to center the form within the remaining available space:

.flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 150px;
  width: 400px;
  background: #e7e7e7;
}
 
form {
  margin: auto;
}

p {
  margin: 0;
}

<div class="flex-container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">
    Lorem ipsum dolor sit amet
  </p>
</div>

For further insights, refer to the following answers:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Can't scroll to top of flex item that is overflowing container

Initial Explanation

An effective technique to "pin" a flex child is by applying an auto margin in the opposite direction of its intended movement. In your scenario, set

p.bot {
    margin-top: auto;
}

and witness the paragraph shift to the bottom of the parent flex container. This strategy works seamlessly with uncomplicated layouts like this...

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bot {
  margin-top: auto;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
</div>

Edit Additionally, I've transformed the form into a nested flexbox inside the .container and adjusted its height to 100%, essentially achieving the same result. Michael_B elaborates on this concept in the comments.

Answer 2

Revised Response

Utilizing auto margins allows you to consolidate or arrange flex items without needing additional markup, or rearrange elements by applying a margin in the opposite direction (as illustrated in my initial response). To achieve this effect, simply apply margin: auto to the form; this will instruct the flex container to center the form within the remaining available space:

.flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 150px;
  width: 400px;
  background: #e7e7e7;
}
 
form {
  margin: auto;
}

p {
  margin: 0;
}

<div class="flex-container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">
    Lorem ipsum dolor sit amet
  </p>
</div>

For further insights, refer to the following answers:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Can't scroll to top of flex item that is overflowing container

Initial Explanation

An effective technique to "pin" a flex child is by applying an auto margin in the opposite direction of its intended movement. In your scenario, set

p.bot {
    margin-top: auto;
}

and witness the paragraph shift to the bottom of the parent flex container. This strategy works seamlessly with uncomplicated layouts like this...

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bot {
  margin-top: auto;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
</div>

Edit Additionally, I've transformed the form into a nested flexbox inside the .container and adjusted its height to 100%, essentially achieving the same result. Michael_B elaborates on this concept in the comments.

Answer 3

Answer №2

To create a pseudo-element with three sections, you can utilize the :before selector on the container and apply justify-content: space-between;

* {
    margin: 0;
}
.container {
    background-color: #eee;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
}
.container:before {
    content: '';
}

<div class="container">
    <form><input type="text" /> <button type="submit">submit</button></form>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

Check out the example on jsfiddle

Answer 4

To create a pseudo-element with three sections, you can utilize the :before selector on the container and apply justify-content: space-between;

* {
    margin: 0;
}
.container {
    background-color: #eee;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
}
.container:before {
    content: '';
}

<div class="container">
    <form><input type="text" /> <button type="submit">submit</button></form>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

Check out the example on jsfiddle

Answer 5

Answer №3

Let's address the issue at hand:

The problem arises from setting the flex-direction to column, which transitions the main axis to vertical and the cross axis to horizontal as outlined in this source.

It's essential to note that the align-* properties function along the cross axis, so specifying .bot with align-self: flex-end actually instructs it to shift right rather than down.

In cases where the item occupies the entire width of the container, like in this scenario, there is no leeway for movement. However, constraining its width could yield different results as seen in this example.

When aiming to affix <copy> to the bottom of the screen using flexbox, a limitation surfaces—there is no equivalent property akin to align-self for the main axis. Explore alternatives such as nesting flexboxes within the existing container or relocating .bot to another one.

Additionally, consider leveraging the capability of flexbox to accommodate absolutely-positioned flex children by employing the following approach:

.container {
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

.bot {
    position: absolute;
    bottom: 0;
}

For a visual demonstration, refer to this DEMO.

Please bear in mind that applying margin-top: auto on .bot won't yield desired outcomes within the current HTML structure. While it may pin the target element to the bottom, it would also displace the centered element towards the top.

Answer 6

Let's address the issue at hand:

The problem arises from setting the flex-direction to column, which transitions the main axis to vertical and the cross axis to horizontal as outlined in this source.

It's essential to note that the align-* properties function along the cross axis, so specifying .bot with align-self: flex-end actually instructs it to shift right rather than down.

In cases where the item occupies the entire width of the container, like in this scenario, there is no leeway for movement. However, constraining its width could yield different results as seen in this example.

When aiming to affix <copy> to the bottom of the screen using flexbox, a limitation surfaces—there is no equivalent property akin to align-self for the main axis. Explore alternatives such as nesting flexboxes within the existing container or relocating .bot to another one.

Additionally, consider leveraging the capability of flexbox to accommodate absolutely-positioned flex children by employing the following approach:

.container {
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

.bot {
    position: absolute;
    bottom: 0;
}

For a visual demonstration, refer to this DEMO.

Please bear in mind that applying margin-top: auto on .bot won't yield desired outcomes within the current HTML structure. While it may pin the target element to the bottom, it would also displace the centered element towards the top.

Answer 7

Answer №4

Using align-self: flex-end; does not produce the desired result when the flex children are aligned in columns.

An easy solution to achieve the desired alignment without adding any extra markup is:

Remove the footer element from the .container

<div class="container"></div>
<p class="bot"></p>

Add display: flex to the body (or another wrapper if needed) so that both the .container and footer become flex children (siblings).
Assign a flex property of flex: 1 1 100% to .container. This will make it grow and shrink based on its initial value of 100%. The footer will be pushed down, but its height will be accounted for when the container shrinks.
Give the footer a flex property of flex: 1 1 auto. This will push it down to the bottom while allowing it to increase in height with more content.

Learn more about the flex property on MDN.

Example

* {
  margin: 0;
  padding: 0;

}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.container {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #EEE;
}
.bot {
  flex: 1 1 auto;
  text-align: center;
  background: #EEE;
  padding: 1em;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
</div>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>

Answer 8

Using align-self: flex-end; does not produce the desired result when the flex children are aligned in columns.

An easy solution to achieve the desired alignment without adding any extra markup is:

Remove the footer element from the .container

<div class="container"></div>
<p class="bot"></p>

Add display: flex to the body (or another wrapper if needed) so that both the .container and footer become flex children (siblings).
Assign a flex property of flex: 1 1 100% to .container. This will make it grow and shrink based on its initial value of 100%. The footer will be pushed down, but its height will be accounted for when the container shrinks.
Give the footer a flex property of flex: 1 1 auto. This will push it down to the bottom while allowing it to increase in height with more content.

Learn more about the flex property on MDN.

Example

* {
  margin: 0;
  padding: 0;

}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.container {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #EEE;
}
.bot {
  flex: 1 1 auto;
  text-align: center;
  background: #EEE;
  padding: 1em;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
</div>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>

Answer 9

Answer №5

To revert the layout to its original state, change the flex-direction property back to column. Then set one of the containers to have a width of 100%, and utilize flex-wrap: wrap to achieve this effect.

An example implementation that is compatible with Firefox and IE 10+ (with vendor prefixes) is shown below:

.container {
  background-color: #333;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}

.footer {
  width: 100px;
  height: 20px;
  margin-top: -20px; /* Set the margin top to negative of the height for perfect centering */
  background-color: #900;
  color: #fff;
  text-align: center;
}

.form-wrapper {
  width: 100%; /* Should be 100% to force item wrapping */
  height: 50px;
  background-color: #009;

  /* Center the form inside the wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="form-wrapper">
    <form>
      <input type="text">
      <button type="submit">Submit</button>
    </form>
  </div>
  <div class="footer">Footer Content</div>
</div>

Answer 10

To revert the layout to its original state, change the flex-direction property back to column. Then set one of the containers to have a width of 100%, and utilize flex-wrap: wrap to achieve this effect.

An example implementation that is compatible with Firefox and IE 10+ (with vendor prefixes) is shown below:

.container {
  background-color: #333;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}

.footer {
  width: 100px;
  height: 20px;
  margin-top: -20px; /* Set the margin top to negative of the height for perfect centering */
  background-color: #900;
  color: #fff;
  text-align: center;
}

.form-wrapper {
  width: 100%; /* Should be 100% to force item wrapping */
  height: 50px;
  background-color: #009;

  /* Center the form inside the wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="form-wrapper">
    <form>
      <input type="text">
      <button type="submit">Submit</button>
    </form>
  </div>
  <div class="footer">Footer Content</div>
</div>

Position the flex item at the bottom of the container

Answer №1

Revised Response

Initial Explanation

Answer №2

Answer №3

Answer №4

Example

Answer №5

Similar questions

Create a container-fluid design in Bootstrap with various colors

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

A guide to placing tooltips dynamically in highcharts column charts

What is the best way to include a minified bootstrap file in a TypeScript project?

Using Paper Checkbox to Toggle the Visibility of a Div in Polymer

I am working with a JSON Object in JavaScript and need to retrieve a key using a String variable

What is the best way to adjust the width of the <span> element in an Angular application?

Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

Retrieving the value of a nested element buried within multiple layers of other elements

jquery selector to target an element nested inside an anchor tag

Communicate through PHP and JavaScript chat to display HTML content in the chat window

Guide for adding an OnClick event to a MatTable row:

tips on concealing video URL

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Implementing Dynamic Parent Node Manipulation with Button Clicks in JavaScript

Accessing a PDF document from a local directory through an HTML interface for offline viewing

Issue with checkbox alignment in Twitter Bootstrap v3.x

How can I embed an iframe in an Angular 4 application?

No modifications to the CSS can be made within the "alterations" section of the Console drawer in Chrome

Tips on retrieving and refreshing dynamically generated PHP file echo output within a div