CODEWITHSUNDEEP
htmlcssflexbox
bodley
bodley

Reputation: 187

Position an element to a bottom of a div using flex

I'm trying to position an button element at the bottom of a div using flex, but currently I did not find any solution.

Let me imagine:

enter image description here

I want to position the button at the bottom of the whole div. Actual styles:

.blackSquareContainer{
  flex: 1 1;
  display: flex;
  max-width: 500px;
  min-height: 490px;
}

I tried on button styles: margin-top: 0 but it displays the button on the right side of blackSquareContainer. I also tried position: absolute and bottom: 0 - it also did not help.

I need also to add, that clicking on button add some rows to div below blackSquareContainer. Unfortunately even if I add this button in that place if I click on it, the div below grow and overlap it. min-height also dont help ;/

What should I do to achieve it?

Upvotes: 2

Views: 2881

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122087

You can use margin-top: auto on button with flex-direction: column on container.

.blackSquareContainer{
  display: flex;
  height: 400px;
  width: 350px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid black;
}

button {
  margin-top: auto;
}
<div class="blackSquareContainer">
  <img src="http://placehold.it/350x150">
  <button>Button</button>
</div>

Upvotes: 1

Aziz
Aziz

Reputation: 7793

To justify flex children from the bottom of the container, use justify-content: flex-end;

.blackSquareContainer{
  flex: 1 1;
  display: flex;
  justify-content: flex-end;
  max-width: 500px;
  min-height: 490px;
}

Upvotes: 1

Related Questions