¿Cómo alinear a la derecha el elemento flexible?

680

¿Hay alguna forma más flexible de alinear a la derecha el "Contacto" que usarlo 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>

Expandir fragmento

http://jsfiddle.net/vqDK9/

html css flexbox

— Mark Boulder
fuente

2

puedes usar float bien, pero es de la misma manera ...! La mejor manera es usar una tabla de visualización con alineación de texto.

— Yohann Tilotti

Claro, si eso es mejor. Sin embargo, sigo

— Mark Boulder

2

Actualicé

— Yohann Tilotti

Aquí hay al menos dos formas de hacerlo: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

453

Aqui tienes. Establecer justify-content: space-betweenen el contenedor flexible.

.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>

Expandir fragmento

— Kevin Suttle
fuente

291

Ojustify-content: flex-end

— BT

1

Intente configurar el ancho de .c en 300px. El título ya no está centrado. Entonces sí, esto responde la pregunta, pero esto rompe el diseño.

— Agamemnus

22

Tenga en cuenta que esto no siempre funciona de la manera esperada, como cuando hay un .c::afterpseudo-elemento. En mi experiencia, margin-left: auto;es el camino a seguir.

— Será el

13

Oflex-flow: row-reverse;

— jchook

8

No creo que sea una respuesta correcta si no desea alinear solo un elemento en un contenedor flexible.

— Foxhoundn

1097

Un enfoque más flexible sería utilizar un auto margen izquierdo (los elementos flexibles tratan los márgenes automáticos de forma un poco diferente a cuando se usan en un contexto de formato de bloque).

.c {
    margin-left: auto;
}

Violín 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>

Expandir fragmento

— a la deriva
fuente

2

Gracias. ¿Preferiría personalmente esto sobre el método de tabla de visualización de Yohann Tilotti anterior? Si es así, ¿por qué?

— Mark Boulder

44

@ MarkBoulder: Por razones de compatibilidad, su método es mejor, pero si ya está usando flexbox, mi respuesta tendría más sentido.

— deriva

44

@ MarkBoulder: Ambos logran lo mismo en este caso. La ventaja sería tener otras propiedades (comportamiento) y asociados a los elementos flexibles que el enfoque de tabla no tiene ( flex, order, etc.).

— deriva

3

Si no puede ajustar los elementos y necesita flotar, digamos los tres últimos a la derecha, apunte al tercero del último solo con este margin-left: auto;estilo.

— Daniel Sokolowski

2

@Justin lo descubrió, no es necesario envolverlos, no podría en mi caso. La solución fue apuntar al primero de los tres elementos solo con margin-left: auto;.

— Daniel Sokolowski

41

Si desea utilizar flexbox para esto, debe poder hacerlo ( display: flexen el contenedor, flex: 1en los elementos y text-align: righten .c):

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... o alternativamente (aún más simple), si los artículos no necesitan reunirse, puede usarlos justify-content: space-betweenen el contenedor y eliminar las text-alignreglas por completo:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Aquí está un demostración en Codepen que le permite probar rápidamente lo anterior.

— Nick F
fuente

2

space-betweenfue exactamente lo que estaba buscando, gracias!

— Eddie Fletcher

Las fronteras desaparecen cuando se usa la segunda sugerencia, ¿comportamiento esperado? codepen.io/oshihirii/pen/RygKRd

— user1063287

38

También puede usar un relleno para llenar el espacio 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;
}

He actualizado la solución con 3 versiones diferentes. Esto debido a la discusión de la validez de usar un elemento de relleno adicional. Si ejecuta el código cortado, verá que todas las soluciones hacen cosas diferentes. Por ejemplo, establecer la clase de relleno en el elemento b hará que este elemento llene el espacio restante. Esto tiene la ventaja de que no hay espacio 'muerto' en el que no se pueda hacer clic.

<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>

Expandir fragmento

— Arno
fuente

3

Finalmente alguien que entiende flexbox

— Kokodoko

99

@Kokodoko, sí, usar un elemento html no semántico más para mover otro elemento es la parte superior de la comprensión de flexbox ...

— Zanshin13

@ Zanshin13 Las otras respuestas escriben tantos css adicionales que también podrías dejar el contenedor flexible y codificar todo tú mismo :)

— Kokodoko

2

@Kokodoko justify-content: space-betweenes "mucho" CSS, ¿en serio? No necesita más comentarios (pero si lo desea, bienvenido a chatear). Esta respuesta tiene derecho a estar aquí, porque es una solución. Pero definitivamente no es el óptimo. Idk, tal vez no te diste cuenta, pero la mayoría de los css de otras respuestas son OP y las respuestas realmente reducen (un poco) la cantidad de css del autor. Esta respuesta no tiene menos CSS que otros (no funcionará sin el CSS de OP: jsfiddle.net/63ma3b56 ). Pero tiene un elemento html más.

— Zanshin13

32

O simplemente podrías usar justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

— Melchia
fuente

3

El justify-contentatributo es un atributo del contenedor flexible, consulte la hoja flexible de Chris Coyer: css-tricks.com/snippets/css/a-guide-to-flexbox

— Klaas van der Weij

1

Esta es la única solución en esta página que funcionó para mí.

— user2847376

19

Tan fácil como

.main {
    display: flex;
    flex-direction:row-reverse;
}

— CESCO
fuente

12

Agregue la siguiente clase CSS a su hoja de estilo:

.my-spacer {
    flex: 1 1 auto;
}

Coloque un elemento vacío entre el elemento de la izquierda y el elemento que desea alinear a la derecha:

<span class="my-spacer"></span>

— andreisrob
fuente

Para aquellos que no solo quieren alinear a la derecha un solo elemento, sino que quieren alinear a la izquierda un elemento y alinear a la derecha otro (dentro del mismo diseño flexible), ¡este es el camino a seguir!

— Sensei James

8

Si necesita que un elemento quede alineado a la izquierda (como un encabezado) pero luego varios elementos alineados a la derecha (como 3 imágenes), entonces haría algo como esto:

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
}

Así se verá (solo se incluyó CSS relevante en el fragmento anterior)

— TetraDev
fuente

6

'justify-content: flex-end' funcionó dentro del contenedor de la caja de precios.

.price-box {
    justify-content: flex-end;
}

— Mohammad Adeel
fuente

4

Me parece que agregar 'justify-content: flex-end' al contenedor flex resuelve el problema mientras que 'justify-content: space-between' no hace nada.

— noches
fuente

2

Para aquellos que usan Angular y Flex-Layout, use lo siguiente en el contenedor de elementos flexibles:

<div fxLayout="row" fxLayoutAlign="flex-end">

Vea los documentos de fxLayoutAlign aquí y los documentos completos de fxLayout aquí .

— Lindauson
fuente

0

Código de ejemplo basado en la respuesta de TetraDev

Imágenes a la derecha:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

Expandir fragmento

Imágenes a la izquierda:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>

Expandir fragmento

— 1,21 gigavatios
fuente