0
227
VistasFlexbox: ajuste la columna de tres filas para que se ajuste a la altura de dos
Nuevo en Flexbox y tratando de entender cómo funciona. Tengo un Code Sandbox de mi código React/bootstrap hasta ahora... Estoy creando un componente de reloj, y tendrá dos botones (uno para aumentar el tiempo y el otro para disminuir). Aquí hay una imagen:
Me gustaría conservar la altura de este componente, ya que es perfecto para mí en este momento; sin embargo, me gustaría agregar tres filas de botones (Inicio, Pausa, 1.°) en una columna separada al lado de este. Me gustaría que esta segunda columna se ajuste y coincida con la altura del reloj a la izquierda. Sin embargo, esto es lo que obtengo:
Intenté crear dos cajas flexibles, pero no estoy seguro de cómo hacer que una haga referencia a la altura de la otra y cambie el tamaño como tal. ¿Cómo voy a hacer esto?
2 Respuestas
Responde la pregunta0
Al usar flexbox , es fácil lograr esto.
Como puede ver en el siguiente fragmento. He recreado su requisito.
Pero los botones arriba/abajo se dan actualmente con un espacio en el medio para alinearlos con los botones más a la derecha (3 botones).
Si desea llenar todo el espacio con los 2 botones, puede proporcionar un relleno a esos botones para que coincidan con la columna de 3 botones.
* { box-sizing: border-box; } .wrapper, .clock-wrapper, .action-wrapper, .btn-wrapper { display: flex; } .btn-wrapper button { padding: 5px 10px; } .action-wrapper, .btn-wrapper { flex-direction: column; justify-content: space-between; } input { height: 100%; font-size: 30px; width: 100px; font-weight: bold; text-align: center; } <div class="wrapper"> <section class="clock-wrapper"> <div class="btn-wrapper"> <button>Up</button> <button>Down</button> </div> <div> <input type="text" value="10:35" /> </div> <div class="btn-wrapper"> <button>Up</button> <button>Down</button> </div> </section> <section class="action-wrapper"> <button>Start</button> <button>Reset</button> <button>1st</button> </section> </div>0
.btns-column button { height:50% }Agregue esto si desea alinear los botones arriba y abajo como la altura del reloj,
'btns-column' tiene altura por el flexbox, lo hiciste bien, pero los botones deben ajustar la altura de 'btns-column'