Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned).

The flex-items are stretched and do not have a fixed height, similar to the flex container. Thank you!

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  padding: 15px;
}
<section class="main-section">
  <div class="container">
    <div class="flex-container">
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt
          arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
          consequat urna quis commodo varius. Praesent hendrerit at augue in fermentum. Ut sed dolor blandit, lacinia orci eget, ultrices elit. Nulla luctus, risus eu viverra eleifend, leo orci posuere nulla, ut vestibulum orci metus in nisi. Aenean et
          porttitor lacus.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt
          arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo.</p>
        <a href="#">Link</a>
      </div>
    </div>
  </div>
</section>

https://jsfiddle.net/ABoooo/dns5zr1p/

htmlcssflexbox

Answer №1

To start, delete align-items: flex-start from the main container. This is canceling out the default stretch, causing the columns to not expand to the full height of the container but only to the height of their content.

Next, transform your flex items into nested flex containers using flex-direction: column. By doing this, you can apply an auto margin to the link to anchor it at the bottom.

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: flex-start;
}

.flex-item {
  flex: 1 0 0;
  padding: 15px;

  display: flex;
  flex-direction: column;
}

.flex-item > a {
  margin-top: auto;
  align-self: center;
}
<section class="main-section">
  <div class="container">
    <div class="flex-container">
      <div class="flex-item">
        <p class="subTitle">Title</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Title</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Title</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus.</p>
        <a href="#">Link</a>
      </div>
    </div>
  </div>
</section>

updated fiddle

For more details on flex auto margins:

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

Answer №2

Make sure to add position: absolute; to your a tag and position: relative; to your flex item:

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  padding: 15px;
  position: relative;
}

.flex-item a {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
<section class="main-section">
        <div class="container">
            <div class="flex-container">
                <div class="flex-item">
                    <p class="subTitle">Title</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Present consequat urna quis commodo varius. Praesent hendrerit at augue in fermentum. Ut sed dolor blandit, lacinia orci eget, ultrices elit. Nulla luctus, risus eu viverra eleifend, leo orci posuere nulla, ut vestibulum orci metus in nisi. Aenean et porttitor lacus.</p>
                    <a href="#">Link</a>
                </div>
                <div class="flex-item">
                    <p class="subTitle">Title</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus.</p>
                    <a href="#">Link</a>
                </div>
                <div class="flex-item">
                    <p class="subTitle">Title</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo.</p>
                    <a href="#">Link</a>
                </div>
            </div>
        </div>
    </section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align two tables horizontally in the center using HTML

Is there a way to center two tables side by side using CSS? I have been able to center a single table, but I am struggling to center two tables together. Can anyone provide a simple solution using CSS? Below are the codes I have used: @import url(ht ...

htmlcsshtml-table

The CSS counter fails to increment

In this unique example: h3 { font-size: .9em; counter-reset: section; } h4 { font-size: .7em; counter-reset: subsection; } h3:before { counter-increment: section; content: counter(section)" "; } h4:before { counter-increment: subsection 2; ...

csscss-counter

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

javascriptangularjshtmlaccessibilityvoiceover

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: for ...

cssreactjsmaterial-uimaterial-table

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

htmlcsssvg

Use an if-else statement in jQuery with selectors to determine if a specific div element has been added to it

What if you have a main div and append one of these sub-divs to it? For example: <div class ="append"> <div id ="one"></div> <div id ="two"></div> </div> Then in jQuery, could you do something like this: if ($(.a ...

javascriptjqueryhtml

Retrieve data from an ASP.NET Web API endpoint utilizing AngularJS for seamless file extraction

In my project using Angular JS, I have an anchor tag (<a>) that triggers an HTTP request to a WebAPI method. This method returns a file. Now, my goal is to ensure that the file is downloaded to the user's device once the request is successful. ...

c#javascripthtmlangularjsasp.net-web-api

When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success. Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution) The issu ...

htmlcssstylesdisplay

Eliminating the need for the horizontal scroll bar on the webpage

I'm dealing with a page that has multiple controls. Initially, there is no horizontal scrollbar on the page. However, as soon as I introduce an AjaxControlToolkit.Editor or a treeview onto the page, a horizontal scroll bar mysteriously appears. For ...

asp.nethtmlcss

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

Currently, I am immersed in a recreational project aimed at enhancing my understanding of vb.net and its interconnectivity. I welcome any suggestions that could potentially enhance the efficiency of my approach! My present focus involves extracting data f ...

jqueryasp.nethtmlvb.net

"Place text at the center of a div that is rotated

I'm facing the challenge of centering a heading both vertically and horizontally within a div that has been rotated 45 degrees (transform:rotate(45deg);). Due to this rotation, I have attempted to counteract it by rotating the heading in the opposite ...

htmlcss

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

javascriptphpjqueryhtmlajax

What could be causing the input submit in my form to be unresponsive when clicked?

I'm stumped on what's causing the issue. My sign-up form seems to be malfunctioning - when I click the "Complete Registration" button, nothing happens! The form doesn't even submit. Here is the HTML structure: <!DOCTYPE html> <html ...

phphtmlcssforms

Avoid Conversion of HTML Entities in Table Cells

<table> <tr> <td>&gt;</td> </tr> <tr> <td>&&#xfeff;GT</td> </tr> </table> In the code snippet above, I have table cells containing HTML entities. A re ...

javascripthtmlangularjs

Discover the chosen image displayed within an ng-repeat showcased in a separate container

I am facing an issue with a table that uses ng-repeat to display data. One of the columns contains photos. When I edit a specific entry in the table, I want the corresponding photo to be shown. How can I achieve this? The code for my table looks like this ...

htmlangularjsangularjs-ng-repeatangular-ngmodel

Submitting form data via Ajax to be processed by Express.js with body parser

Having trouble sending form data to Node.js via AJAX. Using Express with body parser on Node.js However, receiving undefined in req.body. After searching extensively online and trying various solutions without success, I am seeking assistance on the c ...

htmlnode.jsajaxexpressbody-parser

React and Mui are experiencing a peculiar issue where a background is mysteriously missing from a component in a specific location

Exploring React 16 and functional components with hooks Discussing Mui 4 framework Adding a background pattern to multiple login pages seems simple, right? Here is an example of a login page component: return ( <Box width={1} height={1}> ...

cssreactjsmaterial-uibackground

The lengthy string is not breaking into separate lines as expected in Internet Explorer

My querystring is quite long http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081& ...

css

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

javascripthtmlcssreactjsmaterial-ui