html - secundaria - Haga que los elementos secundarios del contenedor se encojan a medida que se envuelven

giros beta

Question

Estoy tratando de averiguar 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 &amp; 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 &amp; 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 &amp;
    <br>documents</div>
</div>

JS Violín aquí

El problema es que cuando hay suficiente espacio para colocar elementos, obtengo unos niños bien ajustados, incluso con espacio entre ellos. (primero, bloque div superior)

Sin embargo, cuando no hay suficiente espacio y el texto dentro de los niños comienza a ajustarse, todo va en una dirección extraña: los niños ya no están bien ajustados, y aunque después del ajuste, hay suficiente espacio alrededor de los niños flexibles, porque ya no están bien ajustados. , el espacio realmente no tiene la oportunidad de funcionar tan bien (segundo bloque div)

Sin embargo, si agrego saltos de línea manuales en los 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 niños bien ajustados dentro de sus cajas (bordes negros), y cualquier espacio que quede, se distribuiría de manera uniforme entre ellos, sin que yo tuviera que agregar saltos de línea manuales (lo cual no es una opción en mi caso )

¿Es posible en absoluto? ...

Answer 1

Eche un buen vistazo a mi Fiddle en el que cambié:

• .holder width a max-width (en clases .v )
• .holder modificado para wrap y space-around sus elementos .holder
• Se agregaron 2 clases .v más para mayor claridad
• eliminó las <br>''s
• y, lo que es más importante , agregó flex: 0 0 a .child

Flexbox casi siempre necesita max-width para ser configurado, que es más flexible que el width . Dependiendo de cómo necesite que se .child los .child ren, modifique flex-grow y flex-shrink en flex: 0 0 para satisfacer sus necesidades. (el resultado de flex: 1 0 ve bien)

... no se necesita Javascript ...

ACTUALIZACIÓN La referencia de Codrops Flexbox realmente me ayudó mucho a comprender FBL ...

Answer 2

En CSS, el contenedor principal no sabe cuándo se ajustan sus elementos secundarios. Por lo tanto, continúa aumentando su tamaño sin darse cuenta de lo que está sucediendo dentro.

Dicho de otra manera, el navegador representa el contenedor en la cascada inicial. No refluye el documento cuando un niño se envuelve.

Es por eso que el contenedor no encoge el diseño más estrecho. Simplemente continúa como si nada estuviera envuelto, como lo demuestra el espacio reservado a la derecha.

La longitud máxima del espacio en blanco horizontal es la longitud del elemento o elementos que el contenedor esperaba estar allí.

En la siguiente demostración, se puede ver el espacio en blanco yendo y viniendo a medida que la ventana se redimensiona horizontalmente: DEMO

Necesitará una solución de JavaScript (consulte here y here ) ... o consultas de medios CSS (consulte here ).

Cuando se trata de texto de ajuste, text-align: right on the container puede ser útil en algunos casos.

Answer 3

La razón por la cual sus bloques se comportan así es debido a la representación CSS.

En el primer caso, en tu violín, los navegadores no saben cuándo el bloque es demasiado pequeño para su contenido. Por lo tanto, se sigue estirando hasta que alcanza el máximo y luego muestra el texto.

En su último caso, le dice al navegador dónde romper para que sepa que el elemento no debería ampliarse.

La única forma en que puede resolver esto fácilmente es estableciendo los descansos usted mismo.

Answer 4

Si está buscando una solución solo para CSS, puede usar algo como width: 100px; para establecer el ancho mínimo del niño y flex: auto; para que crezca

Ejemplo: https://jsfiddle.net/ncvp7gzs/1

(Tenga en cuenta que esto solo se prueba en Chrome)