Почему не работает позиционирование?

Question

[DZHAMBUALT]

Здрасте. Не работает позиционирование элементов (или скорее всего я делаю неправильно). Можете глянуть в чём проблема если не сложно.

Вот так должен выглядеть блок

<!-- BURGER BTN -->
            <div class="head-header__burgerMenu">
              <div></div>
              <div></div>
              <div></div>
            </div>

/* --BURGER BTN */
.head-header__burgerMenu {
  width: 50px;
  height: 25px;
  background-color: green;
  display: flex;
  flex-flow: wrap column;
  justify-content: space-between;
  cursor: pointer;
}
.head-header__burgerMenu div {
  width: 45px;
  height: 5px;
  background-color:  red;
  position: relative;
  right: 0;
  transition: 0.2s all linear;
}
.head-header__burgerMenu div:nth-child(2) {
  left: 0;
}
.head-header__burgerMenu:hover div {
  left: 0;
}
.head-header__burgerMenu:hover div:nth-child(2) {
  right: 0;
}

Answer 1

[Сергей delphinpro]

Расположите все линии столбиком по центру

.head-header__burgerMenu {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Задайте размеры линиям

.head-header__burgerMenu div {
  width: 40px;
  height: 5px;
  background: red;
}

Задайте промежутки между линиями

.head-header__burgerMenu {
  ...
  gap: 5px;
}

Сместите все вправо

.head-header__burgerMenu div {
  transform: translateX(5px);
}

Сместите вторую влево

.head-header__burgerMenu div:nth-child(2) {
  transform: translateX(-5px);
}

Comments

[DZHAMBUALT]

А не получится с помощью left 0 или right 0 прижать к стенке?

[Сергей delphinpro]

DZHAMBULAT-SAMOUCHKA, тогда располагайте полоски абсолютом.
Или если они relative, то нужно указывать относительное смещение: -5px - на пять пикселей влево от положения по умолчанию

Answer 2

[Danny Arty]

А где у вас вообще позиционирование и вам не нужен position: relative, достаточно одного flex

Comments

[DZHAMBUALT]

Ну если так сделать, то я не смогу сделать анимацию c помощью hover, так как transition не работает на align-items вот и ищу альтернативу

[Danny Arty]

DZHAMBULAT-SAMOUCHKA, а какую анимацию сделать хотите?

[DZHAMBUALT]

Danny Arty, Ну уже сделал. Если интересно то верхнюю и нижнюю полоску прижать к левой стенке, а полоску по центру прижать к правой стенке при hover

[Danny Arty]

DZHAMBULAT-SAMOUCHKA, учитывая, что у вас фиксированные размеры, то можно обойтись обычным margin и не использовать align-items и align-self

[DZHAMBUALT]

Danny Arty, Про margin я вообще не подумал, и это тоже можно считать решением