Align div inside a Box

-1

I'm using flexbox, inside the parent div I put a div with text, it's initially positioned at the top, I want to position this div at the end of the parent div. But when I put position relative; and bottom: 0; the child div remains at the top of the parent div.

    
asked by anonymous 05.09.2018 / 19:17

1 answer

1

If you are using display:flex on .pai you have to use align-self: flex-end; on .filho so it aligns on the parent container basis regardless of its size.

You do not need to set position etc ... here is a Flexbox guide that can help you understand how flex attributes work link

See the example:

.pai {
  display: flex;
  width: 200px;
  height: 100px;
  border: 1px solid;
}
.filho {
  width: 100%;
  border: 1px solid;
  align-self: flex-end;
}
<div class="pai">
  <div class="filho">texto aqui</div>
</div>
    
05.09.2018 / 19:25