Centering a search field inside a flex container while keeping a logo to the right?

Question

Trying to center a search field (using flex box) inside a toolbar so that it aligns perfectly with cards contained inside a container below the toolbar.

The yellow search field should be align with the orange cards below it.

The logo is supposed to be self aligned to the left and the menu should be self aligned to the right. I thought justify-self: start | end would do this ...

This is a demo:

h1, h2 {
  font-family: Lato;
}
body {
  margin: 0px;
}

main {
  display: flex;
  margin: 0 auto;
}
.Toolbar {
  display:flex;
  align-items: center;
  height: 3.5rem;
  width: 100%;
  background-color: lightgrey;
}
.Logo {
  justify-self: start;
  margin-left:10px;
  width: 40px;
  height:40px;
  background-color: orange;
}
.SearchField 
{
  justify-self:center;
  width: 200px;
  height:40px;
  background-color: yellow;
}

.Menu {
  justify-self: end;
  width: 40px;
  height:40px;
  background-color: orange;
}

.Card {
  width: 200px;
  height:200px;
  margin: 1rem;
  background-color: orange;
}

.CardContainer {
  display: flex;
  margin: 0 auto;
  flex-direction:column;
}

<div id="app"></div>
<div class="Toolbar">
  <div class="Logo">
    Logo
  </div>  
  <div class="SearchField">
    Search Field
  </div>  
  <div class="Menu">
    Menu
  </div>  
</div>
<main>
<div class="CardContainer">
  <div class="Card">
  </div>
  <div class="Card">
  </div>  
</div>
</main>

score 1 · Accepted Answer · edited Dec 15 '19 at 16:48

This is as close as you're gonna get it. By the way, you can only use align-self in flex children, there is no justify-self.

h1, h2 {
  font-family: Lato;
}
body {
  margin: 0px;
}
main {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.Toolbar {
  display:flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  width: 100%;
  background-color: lightgrey;
}
.Logo {
  width: 40px;
  height:40px;
  background-color: orange;
}
.SearchField 
{
  width: 200px;
  height:40px;
  background-color: yellow;
}

.Menu {
  width: 40px;
  height:40px;
  background-color: orange;
}

.Card {
  width: 200px;
  height:200px;
  margin: 1rem;
  background-color: orange;
}

.CardContainer {
  display: flex;
  flex-direction: column;
}

<div id="app">
    <div class="Toolbar">
      <div class="Logo">
        Logo
      </div>  
      <div class="SearchField">
        Search Field
      </div>  
      <div class="Menu">
        Menu
      </div>  
    </div>
    <main>
    <div class="CardContainer">
      <div class="Card">
      </div>
      <div class="Card">
      </div>  
    </div>
    </main>
</div>

Centering a search field inside a flex container while keeping a logo to the right?

1 Answers1