1

.box { 
     display:flex;
     justify-content:center;
     border-style: solid;
     border-color: blue;
   }

 .item1{
     flex:1;
     display: flex;
     justify-content: center;
     font-size:5rem;
     border-style: solid;
     border-color: coral;
   }

 .item2{
     font-size:2rem;
     border-style: solid;
     border-color: yellow;
   }
<div class="box">
 <div class="item1">
   <div>99.999.00</div>

 </div>
 <div class="item2">99.999.00</div>
 </div>
  

Cómo puedo alinear con flexbox dos items uno al centro y otro alineado a la derecha, pero el que está al centro lo haga sobre el 100% del ancho de la página y no del espacio restante.

Lo estoy haciendo así como muestro abajo, pero el item que está al centro es más grande y va a quedar hacia la izquierda respecto al total del ancho de la página.

Quiero que el número grande "item1" esté centrado respecto al cuadro azul. y el número pequeño item2 esté centrado respecto al cuadro amarillo, alguna idea?, gracias.

Imagen ejemplo


 <div class="box">
 <div class="item1">
   <div>99.999.00</div>

 </div>
 <div class="item2">99.999.00</div>
 </div>
  .box { 
     display:flex;
     justify-content:center;
     border-style: solid;
     border-color: blue;
   }

 .item1{
     flex:1;
     display: flex;
     justify-content: center;
     font-size:5rem;
     border-style: solid;
     border-color: coral;
   }

 .item2{
     font-size:2rem;
     border-style: solid;
     border-color: yellow;
   }

https://jsbin.com/tivenoj/edit?html,css,output

1
  • 1
    Una opcion es poner un clon del de la derecha a la izquierda con opacidad 0 y da la sensacion que está centrado en relacion al medio.
    – Ange Reyna
    Commented el 28 ago. 2020 a las 18:13

1 respuesta 1

0

Agreta esto al .item2:

.item2 {
    display: flex;
    align-items: center;
}

Si no es lo que quieres, muestra una imagen del diseño final de como quedaría el contenedor.

EDITO: Creo que en base a lo que entendí, quieres algo parecido a esto, No se si los borders los colocaste a modo de muestra o si son parte de la maquetación, si es así puedes ajustarlo para que aparezcan en los contenedores editados:

 .box { 
   display:flex;
   justify-content:center;
   border-style: solid;
   border-color: blue;
}
.items {
  width: 100%;
}
.item1{
   flex:1;
   display: flex;
   justify-content: center;
   font-size:5rem;
   border-style: solid;
   border-color: coral;
}

.item2{
   font-size:2rem;
   border-style: solid;
   border-color: yellow;
   display: flex;
   justify-content: end;
   align-items: center;
}
<div class="box">
    <div class="items item0">
    </div>
    
    <div class="items item1">
      <div>99.999.00</div>
    </div>
    
    <div class="items item2">
      <div>99.999.00</div>
    </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.