Como justificar um único item da flexbox (substituir justify-content)

283

Você pode substituir align-itemscom align-selfpara um item de flex. Estou procurando uma maneira de substituir justify-contentum item flexível.

Se você tinha um contêiner flexbox com justify-content:flex-end, mas deseja o primeiro item justify-content: flex-start, como isso pode ser feito?

Esta resposta foi melhor respondida por este post: https://stackoverflow.com/a/33856609/269396

css flexbox Mahks
fonte
2
Use automargens. Ver caixa nº 26 aqui: stackoverflow.com/a/33856609/3597276
Michael Benjamin
Obrigado por vincular a resposta mais útil!
Brady Dowling

Respostas:

549

Parece não haver justify-self, mas você pode obter uma configuração de resultado semelhante apropriada marginpara auto¹. Por exemplo. para flex-direction: row(padrão), você deve definir margin-right: autopara alinhar o filho à esquerda.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>
Expandir snippet

Behavior Esse comportamento é definido pela especificação do Flexbox .

Pavlo
fonte
51
Essa técnica é excelente e também funciona na direção vertical. Por exemplo, você deseja que o último elemento dentro de um contêiner de altura fixa fique na parte inferior. Você pode usar `` `.container {flex-direction: column; justify-content: flex-start} .last-item {margin-top: auto} `` `
Christian Schlensker
6
@krulik Esse comportamento é definido pela especificação do Flexbox
Pavlo
7
Depois de mais algumas investigações, justify-selfpode não ter nada a ver, flexboxmas é usado com, css gridsmas não tenho certeza. Não consigo fazê-lo funcionar no Chrome com o flexbox.
21417 Jake Wilson
8
E se eu quiser que um item fique à esquerda e outro no centro?
Fahmi
3
"Em layouts flexbox, essa propriedade é ignorada" -taken dos docs Mozilla no justificar-auto
Finlay Percy
19

AFAIK, não há propriedades para isso nas especificações, mas aqui está um truque que estou usando: defina o elemento container (aquele com display:flex) como justify-content:space-around Em seguida, adicione um elemento extra entre o primeiro e o segundo item e defina-o flex-grow:10(ou alguns outro valor que funcione com sua configuração)

Editar: se os itens estiverem bem alinhados, é uma boa ideia adicionar flex-shrink: 10;ao elemento extra também, para que o layout responda adequadamente em dispositivos menores.

eeglbalazs
fonte
1
Ele faz o trabalho sem especificar largura (pelo menos ele fez na minha situação)
eeglbalazs
Tentemin-width: 0
The Dembinski
13

Se você não estiver realmente restrito a manter todos esses elementos como nós irmãos, poderá agrupar os que vão juntos em outra caixa flexível padrão e fazer com que o contêiner use espaço entre eles.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>
Expandir snippet

Ou, se você estivesse fazendo a mesma coisa com flex-start e flex-in-reverse, basta trocar a ordem do contêiner flex-default e do filho solitário.

borkxs
fonte
5

Parece que justify-selfestá chegando aos navegadores em breve . Já existe um artigo sobre o MDN . No momento da redação deste artigo, o suporte ao navegador é ruim.

Quanto à margem-solução: tenho uma grade Flexbox com lacunas. Ainda não existe flex-gappropriedade com o Flexbox. Então, para as sarjetas, eu estou usando almofadas e margens, por isso margin: autoprecisa substituir as outras margens ...

Frank Lämmer
fonte
7
Infelizmente,In flexbox layouts, this property is ignored
Sphinxxx
1
@Sphinxxx Sim, mas justify-self faz o trabalho em um display: gridrecipiente. É recente como flexbox, então permite o posicionamento rico como align-items, align-self, bem como algumas características adicionais como o que precisamos aqui, justify-self. O que eu recomendo é usar o flexbox sempre que suficiente, mas se estiver faltando alguma coisa, a grade provavelmente terá o que você está procurando. (por exemplo: alinhamento fácil de um filho para o centro-x e do centro-y, e outro para o centro-x para a direita x - o flexbox possui margin-left: autoesquerda + direita, mas não centro + direita) Exemplo: stackoverflow.com/a/57128453 / 2441655
Venryx 21/07/19
1

Para as situações em que a largura dos itens que você quer flex-endé conhecido, você pode definir a sua flex para "0 0 ## px" e defina o item que deseja flex-startcomflex:1

Isso fará com que o pseudo flex-startitem preencha o contêiner, apenas formate-o para o que text-align:leftfor.

Mahks
fonte
0

Resolvi um caso semelhante, definindo o estilo do item interno como margin: 0 auto.
Situação: Meu menu geralmente contém três botões; nesse caso, eles precisam estar justify-content: space-between. Mas quando houver apenas um botão, ele será agora alinhado ao centro, e não à esquerda.

Micros
fonte