Eu gostaria de ter A Be Calinhado no meio.
Como posso Dir completamente para a direita?
ANTES:
DEPOIS DE:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>Respostas:
Abaixo estão cinco opções para alcançar esse layout:
flex: 1Aplique position: relativeno recipiente flexível.
Aplique position: absoluteao item D.
Agora este item está absolutamente posicionado dentro do contêiner flexível.
Mais especificamente, o item D é removido do fluxo de documentos, mas permanece dentro dos limites do ancestral posicionado mais próximo .
Use as propriedades de deslocamento CSS tope rightpara mover esse elemento para a posição.
Uma ressalva para esse método é que alguns navegadores podem não remover completamente um item flexível absolutamente posicionado do fluxo normal. Isso altera o alinhamento de maneira inesperada e não padrão. Mais detalhes: O item flexível absolutamente posicionado não é removido do fluxo normal no IE11
Com uma combinação de automargens e um novo item flexível invisível, o layout pode ser alcançado.
O novo item flexível é idêntico ao item D e é colocado na extremidade oposta (a borda esquerda).
Mais especificamente, como o alinhamento flexível é baseado na distribuição de espaço livre, o novo item é um contrapeso necessário para manter as três caixas do meio centralizadas horizontalmente. O novo item deve ter a mesma largura que o item D existente, ou as caixas do meio não serão centralizadas com precisão.
O novo item é removido da visualização com visibility: hidden.
Em resumo:
Delemento.automargens para manter A, Be Ccentrado, com ambos os Delementos de criar equilíbrio igual a partir de ambas as extremidades.visibility: hiddenà duplicataDEsse método é semelhante ao nº 2, exceto que é mais limpo semanticamente e a largura de Ddeve ser conhecida.
D.::before.automargens flexíveis para manter A, Be Cperfeitamente centralizado, com o pseudo e os Delementos criando um equilíbrio igual entre as duas extremidades.flex: 1aos itens esquerdo e direitoComeçando pelo método nº 2 ou nº 3 acima, em vez de se preocupar com a mesma largura dos itens esquerdo e direito para manter o equilíbrio, basta fornecer cada um flex: 1. Isso forçará os dois a consumir o espaço disponível, centralizando o item do meio.
Você pode adicionar display: flexitens individuais para alinhar seu conteúdo.
NOTA sobre o uso deste método com min-height: Atualmente no Chrome, Firefox, Edge e possivelmente em outros navegadores, a regra abreviada seflex: 1divide em:
flex-grow: 1flex-shrink: 1flex-basis: 0%Essa unidade de porcentagem (%) ativada flex-basisfaz com que esse método quebre quando min-heighté usado no contêiner. Isso ocorre porque, como regra geral, as alturas de porcentagem nos filhos exigem uma heightconfiguração explícita de propriedade no pai.
Essa é uma regra antiga de CSS que remonta a 1998 ( CSS Nível 2 ), que ainda está em vigor em muitos navegadores, em algum grau ou outro. Para detalhes completos, veja aqui e aqui .
Aqui está uma ilustração do problema postado nos comentários do usuário2651804 :
A solução é não usar a unidade percentual. Tente pxou simplesmente nada (o que a especificação realmente recomenda , apesar do fato de que pelo menos alguns dos principais navegadores acrescentaram uma unidade de porcentagem por qualquer motivo).
Esse pode ser o método mais limpo e eficiente. Não há necessidade de posicionamento absoluto, elementos falsos ou outros truques.
Basta criar uma grade com várias colunas. Posicione seus itens nas colunas central e final. Basicamente, basta deixar a primeira coluna vazia.
ul {
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
}
li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }
/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p { text-align: center; }<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>| true center |</span></p>Maneira mais fácil
.box{
display:flex;
justify-content:center;
}
.item1{
flex:1;
display: flex;
justify-content: center;
transform: translateX(10px);/*D element Width[if needed]*/
} <div class="box">
<div class="item1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="item2">D</div>
</div>Se quiser torná-lo alinhado, basta anexar um espaço vazio e dividir os três trechos filhos neles.
A solução mais simples será justificar o centro de conteúdo para o contêiner pai e fornecer automaticamente a margem esquerda para o primeiro e o último elemento filho.
ul {
display:flex;
justify-content:center;
}
.a,.d {
margin-left:auto;
}<ul>
<li class="a">A</li>
<li>B</li>
<li>C</li>
<li class="d">D</li>
</ul>Usando a display:gridabordagem, você pode simplesmente colocar todos os ulfilhos na mesma célula e definir justify-self:
ul {
display: grid;
}
ul > * {
grid-column-start: 1;
grid-row-start: 1;
justify-self:center;
}
ul > *:last-child {
justify-self: right;
}
/* Make Fancy */
li {
display:inline-block;
margin: 1px;
padding: 5px;
background: #bbb;
}<ul>
<span>
<li>A</li>
<li>B</li>
<li>C</li>
</span>
<li>D</li>
</ul>Pergunta muito clara. Não pude deixar de postar a resposta depois de algumas horas de escavação. Nós poderíamos resolver isso com tabelas, célula de tabela, posições absolutas, transformações, mas só precisávamos fazer isso com o flexbox :)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}I expandiu Michael_B 's resposta
.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) {
flex: 1;
}
.center-flex__2-of-3 > :nth-child(1) {
justify-content: flex-start;
}
.center-flex__2-of-3 > :nth-child(3) {
justify-content: flex-end;
}
.center-flex__1-of-2 > :nth-child(1) {
margin: auto;
}
.center-flex__1-of-2 > :nth-child(2) {
flex: 1;
justify-content: flex-end;
}
.center-flex__2-of-2 > :nth-child(1) {
flex: 1;
justify-content: flex-start;
}
.center-flex__2-of-2 > :nth-child(2) {
margin: auto;
}
.center-flex__1-of-2:before, .center-flex__1-of-1:before {
content: '';
flex: 1;
}
.center-flex__1-of-1:after, .center-flex__2-of-2:after {
content: '';
flex: 1;
}
[class*=center-flex] {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border: 10px solid rgba(0, 0, 0, 0.1);
}
[class*=center-flex] > * {
display: flex;
}
li {
padding: 3px 5px;
}2 of 3
<ul class="center-flex__2-of-3">
<span>
<li>Accusamus</li>
<li>Porro</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
1 of 2
<ul class="akex center-flex__1-of-2">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
2 of 2
<ul class="akex center-flex__2-of-2">
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>
<br><br>
1 of 1
<ul class="center-flex__1-of-1">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>Inspirado no Método # 5: Layout de grade CSS da solução de @Michal Benjamin e porque estou usando Tailwind e, a partir de agora, ainda não tenho acesso a todas as opções de grade por padrão. Isso parece funcionar:
ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
li:nth-child(1) { justify-content: flex-start; } // OR: margin-right: auto
li:nth-child(3) { justify-content: flex-end; } // OR: margin-left:auto
li: {align-self: center;}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>PS: Não tenho certeza se misturar flex e grid dessa maneira é uma boa ideia!
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
position:absolute;
right:10px;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>