html - Alinear elementos a la izquierda y al centro con flexbox

display flex css

Question

Estoy usando flexbox para alinear mis elementos secundarios. Lo que me gustaría hacer es centrar un elemento y dejar el otro alineado a la izquierda. Normalmente, simplemente establecería el elemento izquierdo usando margin-right: auto . El problema es que empuja el elemento central fuera del centro. ¿Es esto posible sin utilizar el posicionamiento absoluto?

HTML y CSS

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

Answer 1

Añadir tercer elemento vacío:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

Y el siguiente estilo:

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Solo izquierda y derecha están listas para crecer y gracias a los hechos que ...

• solo hay dos elementos en crecimiento (no importa si está vacío) y
• ambos tienen el mismo ancho (distribuirán uniformemente el espacio disponible)

... el elemento central siempre estará perfectamente centrado.

Esto es mucho mejor que la respuesta aceptada en mi opinión porque no tiene que copiar el contenido de la izquierda a la derecha y ocultarlo para obtener el mismo ancho para ambos lados, simplemente sucede mágicamente (flexbox es mágico).

En acción:

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

Answer 2

Hasta donde yo sé, esto es posible con el siguiente código.

https://jsfiddle.net/u5gonp0a/

.box {
    display: flex;
    justify-content: center;
    background-color: green;
    text-align: left;
}

.left {
    padding: 10px;
    background-color: pink;
}

.center {
    padding: 10px;
    background-color: yellow;
    margin: 0 auto;
}

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
</div>

Answer 3

Prueba esto sin trucos :)

CSS

.container{
  width: 500px;
  margin: 0 auto;
}
.box{
  display: flex;
  align-items: center;/* just in case*/
  justify-content: space-between;
}
.box p:nth-child(2){
  text-align: center;
  background-color: lime;
  flex: 1 1 0px;
}

HTML

<div class="container">
  <div class="box">
    <p>One</p>
    <p>Two</p>
  </div>
</div>

http://codepen.io/whisher/pen/XpGaEZ

Answer 4

Si no desea confiar en el posicionamiento, la única forma que he encontrado que lo hace realmente centrado es usar una combinación de margen automático y margen negativo para evitar que el elemento centrado sea empujado por el elemento alineado a la izquierda. Sin embargo, esto requiere que sepa el ancho exacto del elemento alineado a la izquierda.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: center;
}

.block {
  width: 120px;
  background: tomato;
}

.justify-start {
  margin-right: auto;
}

.justify-center {
  margin-right: auto;
  margin-left: -120px;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block justify-center"></div>
</div>

Answer 5

Tengo otra solucion. En mi opinión, agregar un bloque vacío al elemento central está bien, pero en cuanto al código es un poco feo. Mi solución para esto está abajo

    <div id="parent">
      <span id="left">Left</span>
      <span id="center">Center</span>
    </div>

   #parent {
      display: flex;    
   }

   #left {
      flex:1;
   } 

   #center {
      flex:1;
   } 

   #parent:after {
      flex:1;
   }

Answer 6

EDITAR: Vea la respuesta de Solo a continuación, es la mejor solución.

La idea detrás de flexbox es proporcionar un marco para alinear fácilmente elementos con dimensiones variables dentro de un contenedor. Como tal, tiene poco sentido proporcionar un diseño donde el ancho de un elemento se ignore por completo. En esencia, para eso es exactamente el posicionamiento absoluto, ya que elimina el elemento del flujo normal.

Hasta donde yo sé, no hay una buena manera de hacerlo sin usar position: absolute; , por lo que sugeriría usarlo ... pero si REALMENTE no desea o no puede usar el posicionamiento absoluto, entonces supongo que podría usar una de las siguientes soluciones.

Si conoce el ancho exacto del div "Izquierdo" , entonces podría cambiar justify-content a flex-start (izquierda) y luego alinear el div "Centro" de esta manera:

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

Si no conoce el ancho , puede duplicar "Izquierda" en el lado derecho, use justify-content: space-between; y ocultar el nuevo elemento correcto: para ser claros, esto es realmente muy feo ... mejor usar posicionamiento absoluto que duplicar contenido. :-)

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 500px;
}
#right {
    opacity: 0;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Left</span>
</div>