Align div inside a Box

Asked

Viewed 60 times

-1

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

css html5 css3 responsive-layout flexbox

1 answer

1

Man if you’re using display:flex in the .pai you have to use align-self: flex-end; in the .filho So he lines up at the base of the container father regardless of his size.

No need to set position etc... here is a guide of the Flexbox that can help you understand how the attributes of flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Take 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>

Browser other questions tagged css html5 css3 responsive-layout flexbox

You are not signed in. Login or sign up in order to post.