How Can I Align Elements to the Bottom of a Container Using Flexbox?

Aligning Elements to the Bottom Using Flexbox

In the provided scenario, you have a div container with various child elements. You aim to achieve a layout where the elements stack vertically, with the button always positioned at the bottom, regardless of the height of the text.

Flexbox provides a solution to this problem through auto margins. Auto margins enable the distribution of remaining space to elements with auto margins prior to alignment. One way to achieve the desired layout is to use the following CSS:

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

Alternatively, you can use a flex layout like this:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1 id="heading">heading 1</h1>
  <h2 id="heading">heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

This approach ensures that the text elements expand to fill the available height, while the button is pushed to the bottom of the container.

The above is the detailed content of How Can I Align Elements to the Bottom of a Container Using Flexbox?. For more information, please follow other related articles on the PHP Chinese website!