Como alinhar à direita o item flex?
Existe uma maneira mais flexbox-ish de alinhar à direita "contacto" do que usar position: absolute
?
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
7 answers
justify-content: space-between
no recipiente flexível.
.main {
display: flex;
justify-content: space-between;
}
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
Uma abordagem mais flexível seria usar uma margem esquerda auto
(Os itens flex tratam margens automáticas um pouco diferente do que quando usado num contexto de formatação de blocos).
.c {
margin-left: auto;
}
Fiddle actualizado:
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
Se quiser usar o flexbox para isto, deverá ser capaz de o fazer (display: flex
no contentor, flex: 1
nos itens, e text-align: right
No .c
):
.main { display: flex; }
.a, .b, .c {
background: #efefef;
border: 1px solid #999;
flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }
...ou alternativamente (ainda mais simples), se os itens não precisam se encontrar, você pode usar justify-content: space-between
no recipiente e remover as regras text-align
completamente:
.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
Aqui está uma demonstraçãono Codepen para permitir que você tente rapidamente o acima.
Também pode usar um enchimento para preencher o espaço restante.
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
.filler{
flex-grow: 1;
}
Actualizei a solução com 3 versões diferentes. Isto por causa da discussão da validade do uso de um elemento adicional de enchimento. Se você executar o código cortado você vê que todas as soluções fazem coisas diferentes. Por exemplo, a configuração da classe de enchimento no item b fará com que este item preencha o espaço restante. Isto tem o benefício de que não há espaço "morto" que não seja clicável.
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
Ou podias apenas usar justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
Tão fácil como
.main { display: flex; flex-direction:row-reverse;}
Se necessitar que um item fique alinhado à esquerda (como um cabeçalho), mas depois vários itens alinhados à direita( como 3 imagens), então você faria algo do género:
h1 {
flex-basis: 100%; // forces this element to take up any remaining space
}
img {
margin: 0 5px; // small margin between images
height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}
Aqui está o que vai parecer (apenas o CSS relavent foi incluído no excerto acima)