Haga que los elementos secundarios del contenedor se encojan para ajustarse a medida que se envuelven
Estoy tratando de descubrir cómo funciona Flexbox (¿se supone que funciona?...) para casos como los siguientes:
.holder {
width: 500px;
background: lightgray;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
.v2 {
width: 320px;
}
.child {
display: inline-block;
border: 1px solid black;
padding: 30px 0px;
text-align: center;
}<div class="holder">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a
<br>glance</div>
<div class="child">After coverage
<br>ends</div>
<div class="child">Forms &
<br>documents</div>
</div>JSFiddle aquí
El problema es que cuando hay suficiente espacio para encajar elementos, obtengo unos niños bonitos y ajustados, con espacios uniformes entre ellos. (primero, bloque div superior)
Sin embargo, cuando no hay suficiente espacio y el texto dentro de los niños comienza a envolverse, todo va en una dirección extraña: los niños ya no están bien ajustados, y aunque después de envolverse, hay suficiente espacio alrededor de los niños flexibles, porque ya no están bien ajustados. , space-around realmente no tiene posibilidades de funcionar tan bien (segundo bloque div)
Sin embargo, SI agrego saltos de línea manuales en lugares donde ocurren los saltos de línea automáticos, todo se presenta como "debería"... (abajo, tercer bloque)
Lo que me gustaría es tener siempre a los niños bien ajustados dentro de sus cajas (bordes negros), y el espacio que quede se distribuya uniformemente entre ellos, sin que tenga que agregar saltos de línea manuales (lo cual no es una opción en mi caso). )
¿Es posible en absoluto?…
En CSS, el contenedor principal no sabe cuándo se ajustan sus hijos. De ahí que siga escalando su tamaño ajeno a lo que sucede en su interior.
Dicho de otra manera, el navegador representa el contenedor en la cascada inicial. No redistribuye el documento cuando un niño lo ajusta.
Es por eso que el contenedor no envuelve el diseño más estrecho. Simplemente continúa como si nada, como lo demuestra el espacio reservado a la derecha.
La longitud máxima del espacio en blanco horizontal es la longitud de los elementos que el contenedor esperaba que estuvieran allí.
En la siguiente demostración, se pueden ver espacios en blanco yendo y viniendo a medida que la ventana cambia de tamaño horizontalmente: DEMO
Necesitará una solución JavaScript (ver aquí y aquí )... o consultas de medios CSS (ver aquí ).
Cuando se trata de ajustar texto, text-align: righten el contenedor puede resultar útil en algunos casos.
Echa un buen vistazo a mi Fiddle en el que cambié:
.holderwidthamax-width(en.vclases)- modificado
.holderawrapyspace-aroundsus hijos - Se agregaron 2
.vclases más para mayor claridad. - retiró el
<br>'s - y, lo más importante , añadido
flex: 0 0a.child
Casi siempre es necesario max-widthconfigurar Flexbox, que es más flexible que width. Dependiendo de cómo necesite .childque se comporte ren, modifique flex-growand flex-shrinkin flex: 0 0para satisfacer sus necesidades. (el resultado flex: 1 0también se ve bien)
...no se necesita Javascript...
La referencia de Codrops Flexbox es muy útil para comprender el diseño de caja flexible.
