Alinhando três elementos (esquerda / centro / direita) dentro de um contêiner

Estou tentando criar um banner de largura total com três elementos internos embutidos. Um link para trás, um logotipo e um link para a frente.

Também gostaria de usar o mesmo código para criar um banner de largura total com DOIS elementos inline internos. Um link para a esquerda e um logotipo central.

O que tenho até agora é:

HTML

 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

SCSS:

#header-blue {
  width: 100%;
  margin-bottom: 50px;
  height: auto;
  background-color: $primary-blue;
  color: #fff;

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
  }
  .header-center {
    border: 1px solid red;
    margin: 0 auto !important;
    display: inline-block;
    width: 100px;
  }

} // header-blue

Estou procurando uma solução que seja amplamente suportada, por isso não tenho certeza se essas regras são flexíveis?

O resultado é este:FIDDLE

EDITAR:O PROJETO CORRETO FINAL QUANDO CONCLUÍDO

Aviso Legal: Por favor, entenda que, embora isso possa ser visto como um post 'duplicado', depois de algumas horas de pesquisa on-line, tentativa e erro, ainda não progredi. Gostaria, portanto, de procurar ajuda exclusiva para esse problema e aprender no processo.

questionAnswers(4)

flex(IE11) ejustify-content, então esconda.clearfix e remova-o quando estiver na quarta posição:

com 3 (4 incluindo clearfix)

#header-wrap {
  display: flex;
  justify-content: space-between;
}

#header-wrap > div {
  border: solid;
  width: 100px;
  margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
  display: none;
}

.clearfix {
  opacity: 0;
}
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

quando apenas 2 (3) mesmo CSS envolvido

#header-wrap {
  display: flex;
  justify-content: space-between;
}

#header-wrap > div {
  border: solid;
  width: 100px;
  margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
  display: none;
}

.clearfix {
  opacity: 0;
}
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="clearfix"></div>
  </div>
</section>

para navegadores mais antigos.

com sua estrutura você poderia usartext-align, :after e o seletor+:

com 3 (4)

#header-wrap {
  text-align: justify;
}
#header-wrap:after {
  content: '';
  display: inline-block;
  width: 99%;
}
#header-wrap > div {
  display: inline-block;
  vertical-align: top;
  border: solid;
  width: 100px;
}
#header-wrap > div + div + div +.clearfix {
  display: none;
}
.clearfix {
  opacity: 0;
}
 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

e 2 (3) mesmo CSS envolvido:

#header-wrap {
  text-align: justify;
}
#header-wrap:after {
  content: '';
  display: inline-block;
  width: 99%;
}
#header-wrap > div {
  display: inline-block;
  vertical-align: top;
  border: solid;
  width: 100px;
}
#header-wrap > div + div + div +.clearfix {
  display: none;
}
.clearfix {
  opacity: 0;
}
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="clearfix"></div>
  </div>
</section>

display: table;

Deixe-me 'mexer' com isso por um momento e volto para você - eu estava trabalhando em algo semelhante ontem.

EDIÇÃO 1: À primeira vista, eu recomendaria a utilização de classes versus IDs. Isso lida com um tópico muito mais amplo (CSS Specificity), mas é extremamente útil para se pensar no início de sua carreira. Dito isto, estou trabalhando em uma solução para você, pois acho que sei o que você deseja.

Como o comentarista mencionou - ajudaria MUITO a ver o que você deseja ver como resultado final. Pela minha interpretação de suas capturas de tela (má qualidade e não-descritiva), eu sinto que você deseja issoheader para manter o botão esquerdo / traseiro e o logotipo em dispositivos móveis. No entanto, no tamanho da porta de visualização de um laptop / desktop, você deseja que um botão de avanço seja exibido.

Se isso estiver incorreto, verifique!

EDIT 2:

Saindo do JSFiddle do pôster acima, eu vim com uma solução "melhor" que empilha os elementos dentro doheader em vez de sair do 'contêiner' em que ele existe:https://jsfiddle.net/f815aa6y/1/

Ainda trabalhando na solução certa para fazer com que isso se alinhe verticalmente no meio :)

CSS flexbox.

Para maior clareza e concisão, removi vários estilos decorativos não essenciais do código original. Eu também usei CSS compilado para o benefício daqueles que não usam pré-processadores.

layout 1: [esquerda] [centro] [direita]

#header-wrap {
  display: flex;                   /* 1 */
  align-items: flex-start;         /* 2 */
  justify-content: space-between;  /* 3 */
  text-align: center;
  padding: 1rem 0;
}

#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left   { border: 1px solid red; width: 100px; }
.header-right  { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left">
      <p>1</p>
    </div>
    <div class="header-center">
      <p>2</p>
      <p>2</p>
      <p>2</p>
      <p>2</p>
    </div>
    <div class="header-right">
      <p>3</p>
      <p>3</p>
    </div>
  </div>
</section>

Notas:

Estabelecer container flexível.Impedir que itens flexíveis expandam a altura total (uma configuração padrão). oflex-start O valor alinhará cada item no início doeixo transversal do recipiente. Nesse caso, esse é o topo do eixo vertical (Y). Se você deseja que os itens sejam centralizados verticalmente, use ocenter valor em vez disso. o valor padrão éstretch.Alinhar itens flexíveis horizontalmente no contêiner. Você também pode tentarjustify-content: space-around. Observe que esse método somente centralizará o item do meio no contêiner se os elementos esquerdo e direito (os links de retorno / retorno) tiverem largura igual. Se os links variarem em comprimento, você precisará usar outro método (consulte as caixas # 71-78aqui)layout 2: [esquerda] [centro]

#header-wrap::after {               /* 4 */
    content: "";
    width: 100px;
}
#header-wrap {
    display: flex;                  /* 1 */
    align-items: flex-start;        /* 2 */
    justify-content: space-between; /* 3 */
    text-align: center;
    padding: 1rem 0; 
}
#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left   { border: 1px solid red; width: 100px; }
.header-right  { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left">
      <p>1</p>
    </div>
    <div class="header-center">
      <p>2</p>
      <p>2</p>
      <p>2</p>
      <p>2</p>
    </div>
  </div>
</section>

Notas:

Use um pseudoelemento invisível para criar equilíbrio igual na extremidade oposta do contêiner. Isso é essencialmente uma substituição do elemento DOM que foi removido do primeiro exemplo. Mantém o item do meio centralizado.jsFiddleSuporte do navegador

O Flexbox é suportado por todos os principais navegadores,exceto IE 8 e 9.

Algumas versões recentes do navegador, como o Safari 8 e o IE10, exigemprefixos de fornecedores.

Para uma maneira rápida de adicionar todos os prefixos necessários, useAutoprefixer.

Mais detalhes emesta resposta.

nte.

https://jsfiddle.net/5gxLvp8a/4/

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    position: relative;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
    position: absolute;
    left: 25px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
    position: absolute;
    right: 25px;
  }

Veja o snippet de código abaixo:

html, html a {
  font-size: 10px; }

  #header-blue {
    width: 100%;
    margin-bottom: 50px;
    height: auto;
    background-color: #3498DB;
    color: #fff; }
    #header-blue #header-wrap {
      text-align: center;
      border: 1px solid green;
      margin: 0 auto;
      padding: 1rem 2.5rem;
      position: relative; }
      #header-blue #header-wrap div {
        display: inline-block;
        vertical-align: middle; }
    #header-blue .header-left {
      float: left;
      border: 1px solid red;
      width: 100px;
      position: absolute;
      left: 25px; }
      #header-blue .header-right {
        float: right;
        border: 1px solid red;
        width: 100px;
        position: absolute;
        right: 25px; }
        #header-blue .header-center {
          border: 1px solid red;
          margin: 0 auto !important;
          display: inline-block;
          width: 100px; }

.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }
<section id="header-blue">
      <div id="header-wrap">
        <div class="header-left"><p>1</p></div>
        <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
        <div class="header-right"><p>3</p><p>3</p></div>
        <div class="clearfix"></div>
      </div>
    </section>
    
        <section id="header-blue">
      <div id="header-wrap">
        <div class="header-left"><p>1</p></div>
        <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
        <div class="clearfix"></div>
      </div>
    </section>

yourAnswerToTheQuestion