Como alinhar as colunas do flexbox à esquerda e à direita?

121

Com CSS típico, eu poderia flutuar uma das duas colunas para a esquerda e outra para a direita com algum espaço de sarjeta no meio. Como eu faria isso com o flexbox?

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}

<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>

Expandir trecho

html css flexbox

— arquiteto
fonte

278

Você pode adicionar justify-content: space-betweenao elemento pai. Ao fazer isso, os itens filhos do flexbox serão alinhados em lados opostos com espaço entre eles.

Exemplo Atualizado

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

Exibir trecho de código

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Expandir trecho

Você também pode adicionar margin-left: autoao segundo elemento para alinhá-lo à direita.

Exemplo Atualizado

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

Exibir trecho de código

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Expandir trecho

— Josh Crozier
fonte

4

Ei, você poderia explicar como o elemento fica alinhado corretamente usando margin-left: autoaqui?

— hulkinBrain

2

@hulkinBrain, aqui está a explicação: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

2

NOTA: margin-left: autoe o margin-right: autotruque não é compatível com o IE11, para aqueles que ainda precisam suportá-lo.

— TetraDev

30

Eu vim com 4 métodos para alcançar os resultados. Aqui está demonstração

Método 1:

#a {
    margin-right: auto;
}

Método 2:

#a {
    flex-grow: 1;
}

Método 3:

#b {
    margin-left: auto;
}

Método 4:

#container {
    justify-content: space-between;
}

— geniuscarrier
fonte

9

Método 5: insira um elemento vazio extra flex:1;onde você quiser que o espaço extra seja :)

— adamdport

Esta seria a melhor e mais completa resposta se você incorporasse o snippet de código em vez de vinculá-lo a jsfiddle.

— estiloso

Os métodos 1 e 3 não são compatíveis com o IE 11!

— Peter Højlund Andersen

1

Outra opção é adicionar outra tag com flex: autoestilo entre as tags que você deseja preencher no espaço restante.

https://jsfiddle.net/tsey5qu4/

O HTML:

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

O CSS:

.fill-remaining-space {
  flex: auto;
}

Isso é equivalente a flex: 1 1 auto, que absorve qualquer espaço extra ao longo do eixo principal.

— konyak
fonte

0

Existem diferentes maneiras, mas a mais simples seria usar o espaço - veja o exemplo no final

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

veja o exemplo

— Ali Adravi
fonte