CSS/HTML background image fixed issue

Question

    CSS
    
    .as {
      width: 300px;
      height: 300px;
      border: 5px solid red;
      position: absolute;
      left: 25%;
      display: flex;
      flex-direction: column;
      
    }
    .ab {
      width: 60px;
      height: 60px;
      border: 2px solid green;
      background-color: green;
    }
    .cd {
      width: 60px;
      height: 60px;
      border: 2px solid blue;
      background-color: blue;
    }

 
    HTML
    $div class="as"$
            $div class="ab"$123$/div$
            $div class="cd"$123$/div$
    $/div$

When I run it, I have green and blue boxes in a big red box. The green and blue are on the left corner. since the parent container, which is "as" has display: flex and flex-direction: column I can't go to the left bottom corner. Is there a way to go to the left bottom? besides make it position: relative and bottom: %. Thank you Hi, I am practicing CSS

Please post the 'rendered' HTML or a [mcve] for easier/faster troubleshooting — blurfus, Feb 28 '21 at 03:31

score 0 · Answer 1 · answered Feb 28 '21 at 05:29

Do you need use property the justify-content with value flex-end to the left bottom corner

Look this example bellow

.as {
  width: 300px;
  height: 300px;
  border: 5px solid red;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.bottom-left {
  justify-content: flex-end;
}

.bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

.ab {
  width: 60px;
  height: 60px;
  border: 2px solid green;
  background-color: green;
}
.cd {
  width: 60px;
  height: 60px;
  border: 2px solid blue;
  background-color: blue;
}

<p>Bottom left</p>
<div class="as bottom-left">
  <div class="ab">123</div>
  <div class="cd">123</div>
</div>
<p>Bottom right</p>
<div class="as bottom-right">
  <div class="ab">123</div>
  <div class="cd">123</div>
</div>

CSS/HTML background image fixed issue

1 Answers1