0
221
Views¿Cómo hacer una caja flexible con límite de 2 elementos por fila?
Necesito hacer una tabla que contenga hasta 4 divs. Pero los divs en esa tabla siempre deben usar el máximo de espacio disponible. Y una fila no debe contener más de 2 divs. Por ejemplo, si la tabla contiene 2 divs, debería verse así 
Si la tabla tiene 3 divs, así: 
Y si contiene 4 entonces debería verse así
Para lograrlo escribí este código:
<div style={{ height: '58vh', border: '1px solid #d9d9d9', borderRadius: '0px 0px 2px 2px', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', }} > <div style={{background:'red', flex: 'auto', margin: '5px'}} <div style={{background:'green', flex: 'auto', margin: '5px'}} <div style={{background:'blue', flex: 'auto', margin: '5px'}} <div style={{background:'pink', flex: 'auto', margin: '5px'}} </div> Pero me falta algo aquí. Para 1 div y para 2 div funciona según lo planeado. Pero para más... Este es mi resultado para 3 divs 
y por 4 divisiones 
¿Alguien puede aconsejarme, por favor, qué debo cambiar en este código?
PD. Por favor, no juzgues mis cuadrados desigualmente dibujados :)
2 answers
Answer question0
.container { display: flex; flex-wrap: wrap; } .inner { flex-basis: 50%; flex-grow: 1; } .inner:nth-of-type(1) { background: red; } .inner:nth-of-type(2) { background: gold; } .inner:nth-of-type(3) { background: green; } .inner:nth-of-type(4) { background: blue; } <div class="container"> <div class="inner">one</div> <div class="inner">two</div> <div class="inner">three</div> <div class="inner">four</div> </div>Utilicé los siguientes pasos para lograr su resultado.
- Haz que el contenedor que contiene las cajas internas sea
flex. - Dale al contenedor
flex-wrap: wrapmanera que las cajas internas que no tienen lugar en la misma línea, pasen a la siguiente línea. - Dar
flex-basis: 50%a las cajas interiores para que ocupen el 50% del espacio disponible. - Dale a las cajas internas
flex-grow: 1para que si a la última caja le queda espacio, lo ocupe todo.
Referencias:
PD: Intenta comentar el cuarto cuadro interior para que el tercer cuadro ocupe todo el espacio horizontal.
0
¿Qué quieres decir con usar Grid para esto?
ejemplo:
display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;aquí está la guía para Grid: https://css-tricks.com/snippets/css/complete-guide-grid/