Tips for positioning an image at the bottom of a div with flexbox

I am facing an issue with aligning an image to the bottom of a parent container that has child elements, such as paragraphs with varying heights based on content. I attempted to use justify-self: flex-end to align the image vertically at the bottom without affecting other items in the parent container but it did not work.

When I tried using justify-content: flex-end, the entire content shifted to the bottom, whereas I only want the image to be aligned at the bottom. What could be the mistake in my approach and how can this be fixed?

.parent-container {
    display: flex;
}
.parent-container > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 10px;
    /*justify-content: flex-end;*/
    flex: 1;
}
.img-container {
    justify-self: flex-end;
}
.img-container img {
    width: 100%;
    justify-self: flex-end;
}
<div class="parent-container">
  <div>
    <h3>header 1</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 2</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 3</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>
</div>

JSFiddle: https://jsfiddle.net/TheAmazingKnight/upay1rod/

htmlcssflexbox

Answer №1

Make sure to uncomment the line justify-content: flex-end; and also include margin-top: auto for the img container

.parent-container {
    display: flex;
}
.parent-container > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 10px;
    justify-content: flex-end;
    flex: 1;
}
.img-container {
    margin-top: auto;  /* added */
}
.img-container img {
    width: 100%;
    justify-self: flex-end;
}
<div class="parent-container">
  <div>
    <h3>header 1</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 2</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 3</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>
</div>

Answer №2

Enclose h3 and p within a container div and apply justify-content: space-between; to .parent-container > div:

CSS:

.parent-container {
    display: flex;
}

.parent-container > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 10px;
    justify-content: space-between;
    flex: 1;
}

HTML:

<div class="parent-container">
    <div>
        <div>
            <h3>header 1</h3>
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="img-container">
            <img src="https://place-hold.it/300x500">
        </div>
    </div>

    <div>
        <div>
            <h3>header 2</h3>
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor
                sit amet.</p>
        </div>
        <div class="img-container">
            <img src="https://place-hold.it/300x500">
        </div>
    </div>

    <div>
        <div>
            <h3>header 3</h3>
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor
                sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="img-container">
            <img src="https://place-hold.it/300x500">
        </div>
    </div>
</div>

Answer №3

To make it work, I made some changes to the CSS code. I included heigh:100%;, removed the comments from justify-content:flex-end;, and redefined .parent-container > div as div.img-container:

    .parent-container {
        display: flex;
    }

    div.img-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin: 0 10px;
        height: 100%;
        justify-content: flex-end;
        flex: 1;
    }

    img {
        width: 100%;
        justify-self: flex-end;
    }

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

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...

javascriptcssreactjsmaterial-ui

"Discover a unique online platform showcasing videos and images with a creative

I recently updated my personal website to showcase some of the tools I've developed through short looping videos. Initially, everything was working well with just images, but when I switched to videos, I encountered some unexpected behaviors. Interest ...

htmlcss

Leveraging the p-steps module from PrimeNG for smaller screen sizes

I am facing an issue with resizing the p-steps component from PrimeNG to avoid overflow in smaller screen resolutions. The current code I am using is as follows: <div class="d-flex card mb-4"> <p-steps [model]="items" ...

htmlangularprimeng

Implementing a permanent class following an incident

Is it possible to dynamically add a class to an element when an event occurs rather than based on a condition? For example, I have a td that displays a variable. <td>{{myVar}}</td>//myVar=10 When the variable changes to myVar=15, I want to ad ...

javascripthtmlangularjs

Unable to show PHP results in HTML

I've tried many solutions from different articles, but none seem to work for me. I would greatly appreciate any assistance in displaying the Full_Name field within an HTML element on my webpage. Below is the content of the PHP file: {"Test_Info": { ...

phphtmljsonajax

The search and sorting functionality in jquery DataTables is malfunctioning

I am facing difficulties with sorting and filtering the datatable as none of the JS functions seem to be working properly. I have already included the necessary JS files. Here are some details: I am connecting to a database to retrieve data in JSON format. ...

javascriptjqueryajaxhtmldatatable

Optimizing CSS for Improved Page Ranking

I'm currently working on styling the layout of my MySQL database results using a combination of HTML and CSS. My goal is to have all the "hi's" displayed under the column labeled "Good Comment," while the "asasd" and 4 occurrences of "BAD" shoul ...

htmlcss

angularjs: container holding directive is currently not visible, with a height and width of 0 pixels

When implementing a directive in this way, the actual element (<a-directive>) appears to have dimensions of 0px height and 0px width. View jsfiddle example var myApp = angular.module('myApp', []).directive('aDirective', function ...

cssangularjsangularjs-directive

Unlock the Secrets of Soundcloud: Practical Steps to Implementing the Soundcloud API in Real Life

I attempted to publish the exact .html and .js codes on the internet and host them on my own server. I am aiming to duplicate this particular example: You can check out my code at www[dot]whatsgucci[dot]com/cloudstalk.html Here is the code I utilized: ...

javascripthtmlcsssoundcloud

Utilize AngularJS to enable a CSS Class through an array order

I need to activate a heartbeat CSS animation on 6 different divs, but I want to do it in a specific sequence. For instance, let's say I have an array: self.arraySequence = [0,3,5,3]; In this array, each number represents the position of the div tha ...

javascripthtmlcssangularjs

Creating a function within document.ready using jQuery is a common practice for ensuring that

I am currently working on creating a straightforward function that will replace an attribute when called using onclick="changeYoutube('XXXXXX');" within a link tag. However, I am encountering an issue where it says calling "changeYoutube" is resu ...

jqueryhtml

Crystal report for VS2010 displays scrollbars on the page

I like to present my report in a div container with overflow:scroll I have placed the crystal report viewer inside the DIV and expect it to stay within the div only, which it does. The div shows scroll bars when the report overflows. However, my page als ...

cssvisual-studio-2010crystal-reports

Setting overflow sizes manually for parent containers when child elements are transformed using CSS can be done by following these steps

It has come to my understanding that CSS transforms do not impact the actual size of an element, rather its visual representation. There have been discussions on this topic: CSS Scale transform on child not affecting parent size CSS transform: scale does ...

javascripthtmlcssoverflowcss-transforms

Tips for flipping the content of an accordion button in Bootstrap 5

Looking for help with customizing an accordion button on a website with Arabic content. The issue is that I need to reverse the content within the accordion-button (the question on the right, and the down arrow on the left). Any suggestions on how to sol ...

htmlcssalignmentarabicbootstrap-5

Swap the existing div with a fresh div using jQuery or JavaScript

Seeking a straightforward method to swap out a div with a different div, ensuring cross-browser compatibility with JavaScript or jQuery. Below is a code snippet to demonstrate. The goal is to replace "myDiv-B" with a new div: <div id="myDiv-C">{% in ...

javascriptjqueryhtml

Using the jQuery plugin multiple times within one website

I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...

javascriptjqueryhtmlcss

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

When working with Blazor, you have the ability to dynamically load content by enclosing it within an @if block and then setting the condition to true, such as when a button is clicked. Recently, I encountered an issue with a Bootstrap dropdown in my proje ...

cssbootstrap-4blazorblazor-server-sidepopper.js

Activate a link, launch a pop-up window, and navigate to the link within the pop-up

I have an unusual idea I'm working on. Let me explain the situation first, and then I'll outline the step-by-step process I want to follow. I currently have a list of items inside a <ul>. Whenever I click on one of these items, I want a mod ...

javascripthtmlbootstrap-4bootstrap-modal

Python script unable to locate div popup using Selenium

Recently, I've been working on enhancing my selenium skills, but I'm facing a challenge in finding a solution to this particular issue. While experimenting with the functionality of the page located at: www.omegle.com When using selenium to cli ...

pythonhtmlcssselenium-webdriveriframe

The method to disable the dropdown for a select tag in a Polymer Dom-module is not functioning properly

I need help modifying the country dropdown based on a value retrieved from backend code If the disabled_value is 0, I want to hide the dropdown and make it unselectable If the disabled_value is 1, I want to enable the dropdown for selecting countries &l ...

javascripthtmljquerytemplatesdom