single div position using flexbox

June 26, 2024

I’m trying to make the image div is centered, and bot section stick to bottom.

I also used justify-content: flex-end, but image div does not want to change its position at all

What i try

.box
{
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
 
}

  .image 
  {
    align-self: center;
    width: 100%;
    height: 40%;
  }

  .bot-section
  {
    width: 100%;
    align-self: flex-end; 
  }

<div class="box">
 <div class="image"></div>
 <div class="bot-section">
    <div class="text"></p></div>
    <div class="progress"></div>
 </div>
</div>

>Solution :

Just edit your css as follows:

.box
{
  width: 100px;
  height: 100px;
  background-color: rgb(44, 44, 44);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
 
}

  .bot-section {
    width: 100%;
    align-self: flex-end;
    position: absolute;
    bottom:0;
    
  }