Q: How to align element at center bottom using flex box I am beginner and I am trying to align span element at parent element bottom side. For this I used below CSS, but why it's not working:


.sidebarBtn {
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  height: 500px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: beige;
  outline: none;
  cursor: pointer;
}

.sidebarBtn span {
  width: 35px;
  height: 3px;
  background-color: black;
}
<button class="sidebarBtn">
  <span></span>
</button>



A: Use a column flexbox and align it to bottom using justify-content: flex-end - see demo below:


.sidebarBtn {
  position: absolute;
  top: 0;
  right: 50px;
  width: 50px;
  height: 500px;
  border: none;
  display: flex;
  flex-direction: column; /* ADDED */
  justify-content: flex-end; /* CHANGED */
  align-items: center; /* CHANGED */
  background-color: beige;
  outline: none;
  cursor: pointer;
}

.sidebarBtn span {
  width: 35px;
  height: 3px;
  background-color: black;
}
<button class="sidebarBtn"><span></span></button>


But you'd think why your code wasn't working when it would work fine for a div but not a button element in this case - that is because button or fieldset elements are not designed to be a flex container. See how everything is normal when you keep the flexbox inside the button:


.sidebarBtn {
  background-color: beige;
  outline: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 50px;
  width: 50px;
  height: 500px;
}

.sidebarBtn>span {
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}

.sidebarBtn>span>span {
  width: 35px;
  height: 3px;
  background-color: black;
}
<button class="sidebarBtn">
  <span>
    <span></span>
  </span>
</button>



A: I think button cannot be flex containers, they can only be flex elements.
This code should work but I'm not sure if that's the best way to do it.
It works on Chrome, you might have to try on different browsers.


.sidebarBtn {
  width: 50px;
  height: 500px;
  border: none;
  background-color: beige;
  cursor: pointer;
}

.sidebarBtnContent {
  width:100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sidebarBtnContent span {
  width: 35px;
  height: 3px;
  background-color: black;
}
<button class="sidebarBtn">
  <span class="sidebarBtnContent">
    <span></span>
  </span>
</button>


