Как выровнять элемент по центру с помощью гибкой коробки

Question

Я новичок и пытаюсь выровнять элемент span в нижней части родительского элемента.Для этого я использовал ниже CSS, но почему он не работает:

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

Answer 1

Я думаю, button не может быть flex-контейнерами, они могут быть только flex-элементами.

Этот код должен работать, но я не уверен, что это лучший способ сделать это.Он работает на Chrome, возможно, вам придется попробовать разные браузеры.

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

Answer 2

Используйте столбец flexbox и выровняйте его по низу, используя justify-content: flex-end - см. Демонстрацию ниже:

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

Но вы бы подумали , почему ваш код не работал, когда он работал бы нормально для div, но не *Элемент 1015 * в данном случае - это потому, что элементы button или fieldset не предназначены для использования в качестве гибкого контейнера .Посмотрите, как все нормально, когда вы удерживаете flexbox внутри кнопку:

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