How can I align one item left and other center with flexbox?

Question

Im trying to align with flexbox one item to the left and one to the center (as seen in the image below)

I tried using justify-content: center; on the flexbox container and justify-self: flex start; on the first child, but it didn't worked.

.menu {
  width: 39.3rem;
  height: 4.8rem;
  background-color: rgba(0, 0, 0, 0.19);
  display: flex;
  align-items: center;
  padding: 0 2.15rem;
  position: fixed;
  z-index: 1;
}
.menu__button{
  background: none;
  border-style: none;
}
.menu__button-icon{
  width: 2.7rem;
}
.menu__logo{
  width: 15.7rem;
  margin-left: auto;
}
.menu__logo-img{
  width: 100%;
}

<div class="menu">
        <button class="menu__button" id="menu__button">
          <img
            class="menu__button-icon"
            src="./images/burger_menu.svg"
            alt="menu"
          />
        </button>
        <figure class="menu__logo">
          <img class="menu__logo-img" src="./images/logo.svg" alt="logo" />
        </figure>
      </div>

This will help https://stackoverflow.com/questions/38948102/center-one-and-right-left-align-other-flexbox-element — Mustafa Kemal, Sep 27 '21 at 16:37
there is no justify-self in flexbox layouts, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#there_is_no_justify-self_in_flexbox — userharis, Sep 27 '21 at 16:42
Set flex:1 to button and flex:2 to figure. Then set logo width to be 50%. — Servesh Chaturvedi, Sep 27 '21 at 16:50

How can I align one item left and other center with flexbox?

0 Answers0