What is the best way to align the bottom of the last child of a flex element?

Current: https://i.sstatic.net/e7V8x.png Desired: https://i.sstatic.net/Xszod.png

Is it possible to achieve this using the flex or grid model, or do I need to reconsider the structure with a different approach?

Below is the code snippet:

.sections {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0em -1em 2em -1em;
}

.box {
  position: relative;
  display: inline-block;
  flex-grow: 0;
  min-width: 300px;
  max-width: 420px;
  margin: 1em;
  border-radius: 10px;
  padding: 1em;
  vertical-align: top;
}

.elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1em 0em 0em 0em;
}

.itm {
  position: relative;
  display: inline-block;
  flex-grow: 0;
  width: 100px;
  margin: 1em;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
  padding: 0.5em;
  vertical-align: top;
}
<div class="section">
  <div class="box">
    <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdff</p>
      </div>
      <div class="itm">
        <p>adsf adsf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Short text short text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">:
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>sadf sadf</p>
      </div>
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

To create space and push items down in your paragraph tag, you can include the following CSS:

.box > p {
  flex: 1;
}


.section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box {
    display: flex;
    flex-direction: column;
    border: 2px solid lightcoral;
    min-width: 300px;
    max-width: 420px;
    margin: 1em;
    border-radius: 10px;
    padding: 1em;
}

.box > p {
  flex: 1;
}

.elements {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1em 0em 0em 0em;
}

.itm {
    position: relative;
    display: inline-block;
    margin: 1em;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
    padding: 0.5em;
}
<div class="section">
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt urna et vulputate viverra.</p>
        <div class="elements">
            <div class="itm"><p>Item 1</p></div>
            <div class="itm"><p>Item 2</p></div>
            <div class="itm"><p>Item 3</p></div>
        </div>
    </div>
    <div class="box">
        <p>Suspendisse potenti. Donec at magna metus. Nullam suscipit tristique turpis eget aliquam.</p>
        <div class="elements">
            <div class="itm"><p>Item 1</p></div>
            <div class="itm"><p>Item 2</p></div>
            <div class="itm"><p>Item 3</p></div>
        </div>
    </div>
    <div class="box">
        <p>Duis venenatis, justo ac ultrices malesuada, dui tellus maximus risus, non condimentum mauris est vitae diam.</p>
        <div class="elements">
            <div class="itm"><p>Item 1</p></div>
            <div class="itm"><p>Item 2</p></div>
            <div class="itm"><p>Item 3</p></div>
        </div>
    </div>
</div>

Answer №2

To create a nice layout for the content boxes, use flex columns and apply justify-content: space-between. This will evenly spread the two child elements. If you have multiple paragraphs, place them in a single div to ensure that there are only two flex children.

It's important to remove unnecessary properties like vertical-align, position, and display when working with flex layouts as they are generally not needed.

Some styles have been hidden for demonstration purposes.

.section {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  justify-content: flex-start;
  margin: 0em -1em 2em -1em;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 0;
  /* min-width: 300px; */
  /* max-width: 420px; */
  margin: 1em;
  border-radius: 10px;
  padding: 1em;
}

.elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1em 0em 0em 0em;
}

.itm {
  flex-grow: 0;
  width: 100px;
  margin: 1em;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
  padding: 0.5em;
  vertical-align: top;
}
<div class="section">
  <div class="box">
    <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Short text short text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
</div>

Answer №3

Consider including margin-top: 5px; in the "itm" class definition

.itm {
    margin-top: 5px;
    position: relative;
    display: inline-block;
    flex-grow: 0;
    width: 100px;
    margin: 1em;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
    padding: 0.5em;
    vertical-align: top;
}

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

What steps do I need to take to activate the spell check function for an HTML text area?

Is it feasible to activate the spell check functionality in HTML text areas while utilizing ColdFusion? ...

htmlcoldfusionspell-checking

Struggling to set the background color for a div element

I am dealing with the following HTML and CSS: <div id="com_loaded"> <div id="com_loaded_userpic"><a href="#" class="tooltip"><img src="pic.jpg" class="img_poster" /><span>Username</span></ ...

htmlbackground-color

When the React component's state is updated, an animation is triggered in a subcomponent connected to the parent component

The ProjectsSection component is responsible for rendering a document section with a header and cards. The goal is to trigger a header animation only when the header becomes visible on the screen for the first time and have it run once. However, adding a s ...

cssreactjs

Persist user input even after reloading the page

In order to enhance the user experience, I would like to implement a feature where the data entered by the user is preserved even if they refresh, reload, or close the page. This includes retaining the selections made in the select elements. Additionally, ...

javascripthtmljquerycss

Having trouble getting the show/hide div feature to work in a fixed position on the

Trying to show/hide a div using jQuery isn't working when the div is wrapped in a position:fixed element. However, changing it to position:relative makes the show/hide function work again. You can see an example of the working version with position:r ...

jquerycss

Center the image and align the floated texts on each side horizontally

I've recently started learning about HTML and CSS, but I'm having trouble grasping one concept. My goal is to align two floating <p> elements on either side of a centered <img>. Here's an example of what I'm trying to achiev ...

htmlcss

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

javascripthtmlcssjointjs

Is there a way to prevent a tag from being clickable on the entire row, except for the actual link itself?

My question is why, when using the a tag, the entire row on the right becomes clickable as well? Despite there being no link, the area at the back of the row on the right side is clickable. Is there any way to remove this clickable area? <a id="ba ...

htmlcss

Is there a way to disable responsiveness on a website?

Currently, I am in the process of developing a responsive style sheet that is live on our website. However, it seems to display poorly on non-desktop devices due to being a work in progress. I am considering using JavaScript to enforce the desktop layout ...

javascriptcsshtmlresponsive-design

Positioning JQuery sliders

I've been working on a jQuery slider for my header, but I'm encountering an issue where the previous image drops down to the next container instead of staying in place and transitioning smoothly. It seems like there might be an error in my HTML/C ...

javascriptjqueryhtmlcss

The addClass and removeClass functions seem to be malfunctioning

Hey everyone, this is my first time reaching out for help here. I looked through previous questions but couldn't find anything similar to my issue. I'm currently working on a corporate website using bootstrap3 in Brackets. I've been testing ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Bootsrap 5.3 navbar is not fully extending to the width of the page

My goal is to have the list items in a Bootstrap navbar stretch across the width of the page in mobile view, but I'm having trouble achieving this. I've tried following various tutorials without success. I even attempted using *{margin:0;padding ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

Exploring the power of colors in Tailwind CSS and Material UI for your CSS/SCSS styling

Discovering unique color palettes like the Tailwind Color for Tailwind CSS and theMaterial UI colors has been inspiring. These collections offer a range of beautifully named colors from 100 to 900 and A100 to A400, reminiscent of font styles. I am intrig ...

csssassmaterial-uimaterializetailwind-css

Exploring the capabilities of rowGroup within DataTables

Currently, in the process of completing a project, I am retrieving data from a REST API to populate my DataTable. To avoid displaying duplicate items, I am interested in creating subrows in the DataTable with a drop-down menu based on an item in the "Deliv ...

javascripthtmljqueryajaxdatatables

What is causing the failure of these "span" elements within an "a" tag in IE7?

Here is a code snippet that I am working with: HTML (version 4.0) <div class="temperatura"> <a href="/link/" class="temperatura_localita"> <span style="padding-left:12px;"> T ...

htmlcss

Can a post request be sent in Node/Express using just HTML and server-side JavaScript (Node.js)?

Can a post request be made in Node/Express using only HTML and Server-side Javascript? (HTML) <form action="/submit-test" method="post"> <input type="text" name="id"> <button type="submit">Submit</button> </form> (N ...

javascripthtmlnode.jsexpresspost

The CSS :active selector glutton

Within a <div> element, I have an <img>. I would like the entire div to scale down by 10% (using transform) when clicked on. While I have achieved this effect, there is one minor issue: clicking on the image itself does not trigger the scaling, ...

htmlcssinternet-explorercss-selectors

Enhance your picture links with a:hover box-shadow styling

I've been struggling to add a box shadow on hover to a Facebook icon image. I assumed it would be straightforward, but as always, I was wrong. I'm working with a child theme in WordPress because I recently started, thinking it would be an easy wa ...

hovermouseovercss

Why do CSS Variables have different syntax for setting and getting values?

When we use CSS Variables, also known as CSS Custom Properties, the syntax for setting and getting values is different. To set a value for --my-custom-width, we use: :root { --my-custom-width: 120px; } Similarly, to get the value of --my-custom-width, ...

csscss-variables

Generate a text input field within a dropdown menu

Below is an example of my basic HTML code for a drop-down list: <span id="Div_List"> <label for="Gender">For:</label> <select name="Gender" id="Sex"> <option value="1">1000mtr</option> <option val ...

javascriptjqueryhtml