html - justificar - centrar texto css vertical

Cómo alinear en el centro un elemento flexible y alinear a la derecha otro utilizando Flexbox

Question

Esta pregunta ya tiene una respuesta aquí:

• Centrar y alinear a la derecha elementos de flexbox 2 respuestas

Soy totalmente nuevo en Flexbox y quería alinear los botones, pero no pude ver cómo manejar el caso común con un botón alineado en el centro y un botón alineado a la derecha en la misma fila usando solo Flexbox.

Sin embargo, encontré una forma que utilizaba un elemento invisible alineado a la izquierda de la misma longitud que el elemento alineado a la derecha y el justify-content flexible con space-between para hacer que el elemento central estuviera centrado en la fila.

¿Hay una forma más directa con Flexbox?

.flexcontainer {
  display: flex;
  justify-content: space-between;
  width: 500px;
  height: 200px;
}
.iteminvisible {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  visibility: hidden;
}
.itemcenter {
  flex: 0 1 auto;
  width: 150px;
  height: 100px;
  .itemright {
    flex: 0 1 auto;
    width: 100px;
    height: 100px;
  }

<div class="flexcontainer">
  <div class="iteminvisible">Other</div>
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

Answer 1

El uso de justify-content: space-between con un elemento flexible invisible, como se describe en su pregunta, es una buena manera de lograr el diseño que desea. Solo tenga en cuenta que el elemento central solo se puede centrar si los elementos izquierdo y derecho tienen la misma longitud ( ver demostración ).

Otra solución que tal vez quiera considerar involucra márgenes auto y posicionamiento absoluto . Dos beneficios de este método son la necesidad de un marcado adicional y se puede lograr un verdadero centrado independientemente del tamaño de los elementos. Un inconveniente es que el elemento centrado se elimina del flujo de documentos (lo que puede o no puede ser importante para usted).

.flexcontainer {
      display: flex;
      justify-content: flex-start;   /* adjustment */
      position: relative;            /* new */
      width: 500px;
      height: 200px;
    }

.itemcenter {
      flex: 0 1 auto;
      width: 150px;
      height: 100px; 
      position: absolute;             /* new */
      left: 50%;
      transform: translateX(-50%);
    }

.itemright {
      flex: 0 1 auto;
      width: 100px;
      height: 100px;
      margin-left: auto;              /* new */
    }

<div class="flexcontainer">
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

Más detalles aquí: Métodos para alinear elementos flexibles a lo largo del eje principal (vea los cuadros # 62-78).

Answer 2

Por lo que entiendo, el botón que desea "flotar" a la derecha no debería ser flex: 0 1 auto sino más bien flex: 0 0 auto . El primer parámetro en el estilo flex dicta si un elemento debe crecer. Si no quiere que ocupe más espacio de lo necesario, no le diga que crezca.

Answer 3

   .container {
      display: flex;
      flex-direction: column; //this will allow flex-end to move item to the right            
      align-items: center;
   }
   .right-item {
      align-self: flex-end;
   }