html - que - ¿Cómo alinear correctamente el elemento flexible?

justificar texto html

Question

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

http://jsfiddle.net/vqDK9/

Answer 1

Aqui tienes. Establezca justify-content: space-between 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>

Answer 2

O simplemente puedes usar justify-content: flex-end

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

Answer 3

Si desea utilizar flexbox para esto, debería poder hacerlo haciendo esto ( display: flex en el contenedor, flex: 1 en los elementos y text-align: right on .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 (incluso más simple), si no es necesario que los elementos se encuentren, puede usar justify-content: space-between en el contenedor y eliminar completamente las reglas de text-align :

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

Aquí hay una demo en Codepen para que pueda probar rápidamente lo anterior.

Answer 4

Si necesita que un elemento se alinee a la izquierda (como un encabezado) pero luego varios elementos alineados a la derecha (como 3 imágenes), entonces debería hacer 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
}

Esto es lo que se verá (solo se incluyó el código CSS en el fragmento anterior)

Answer 5

También puede utilizar 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, si configura la clase de relleno en el elemento b, este elemento ocupará 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>

Answer 6

Tan fácil como

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

Answer 7

Un enfoque más flexible sería utilizar un margen izquierdo auto (los elementos flexibles tratan los márgenes automáticos de manera 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>