Align Div to the bottom of the Parent div-CodePudding

I want to align a div to the bottom of the parent div. An example is on the screen below enter image description here

these div are inside an grid, why is the button inside the div not sticked to the bottom.

CodePudding user response：

I suggest you use CSS flexbox layout rules. Look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for a great guide.

CodePudding user response：

.parent {
  height: 400px;
  width: 350px;
  background-color: black;
  display: flex;
  align-items: end;
  justify-content: center;
}

.child {
  width: 90%;
  height: 30px;
  background-color: cyan;
  margin-bottom: 20px;
  border-radius: 5px;
}

<div >
  <div ></div>
</div>