How can I bottom-align elements within a Flexbox container?

Flexbox: Bottom-Aligned Elements

If you have a container element containing child elements and you want to align the bottom-most child element vertically to the bottom of the container, the versatile Flexbox layout model offers an effective solution.

In the example provided:

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

You want the following layout:

-------------------
| heading 1          |
| heading 2          | 
| paragraph text     |
| can have many      |
| rows               |
|                   |
|                   |
|                   | 
| link-button        |
-------------------

Leveraging Auto Margins

Auto margins prove to be a convenient tool in this scenario. Before the alignment process through justify-content and align-self, any remaining free space is automatically distributed to auto margins in that dimension.

Therefore, you can employ one or both of the following CSS rules:

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

Example Implementation

Applying the suggested CSS rules, coupled with a Flexbox container with a columnar orientation, yields the desired outcome:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  margin: 0;
}

a {
  margin-top: auto;
}

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

The above is the detailed content of How can I bottom-align elements within a Flexbox container?. For more information, please follow other related articles on the PHP Chinese website!