froggy examples bootstrap html css css3 flexbox

html - examples - Haga que el relleno div quede espacio*horizontal*restante en flexbox



flexbox html (2)

Tengo 2 divs de lado a lado en un flexbox. El de la derecha siempre debe tener el mismo ancho, y quiero que el de la izquierda solo tome el espacio restante. Pero no lo hará a menos que establezca específicamente su ancho.

Por lo tanto, en este momento, está configurado en 96%, lo que se ve bien hasta que realmente aplastas la pantalla; luego, el divisor de la derecha se queda un poco hambriento del espacio que necesita.

Supongo que podría dejarlo como está, pero se siente mal, como si tuviera que haber una manera de decir:

el correcto es siempre el mismo; a la izquierda, obtienes todo lo que queda

.ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); }

<br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it''s Stopped it Keeps on Going for even longer!"> Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it''s Stopped it Keeps on Going for even longer! </strong> </div> <div style="width:100%; display:flex; justify-content:space-between;"> <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name"> A really really really really really really really really really really really long department name </div> <div style="color:#555555; text-align:right; white-space:nowrap;"> Created: 21 September 2016 </div> </div> </div> <div style="margin-left:8px;"> <strong>&gt;</strong> </div> </div>


Básicamente, estaba tratando de hacer que mi código tuviera una sección central en una ''fila'' para autoajustarse al contenido en ambos lados (en mi caso, un separador de línea de puntos). Como sugirió @Michael_B, la clave es usar display:flex en el contenedor de fila y al menos asegurarse de que su contenedor central en la fila tenga un valor de flex-grow de al menos 1 (si los contenedores externos no tienen ninguna propiedad de flex-grow aplicado).

Aquí hay una foto de lo que estaba tratando de hacer y un código de muestra de cómo lo resolví.

Editar: el borde inferior punteado probablemente se verá extraño dependiendo de cómo lo muestre su navegador. Yo personalmente recomendaría usar un SVG de círculo negro como una imagen de fondo repetida, de tamaño adecuado y colocada en la parte inferior del contenedor central. Agregaré esta solución alternativa cuando tenga tiempo.

.row { background: lightgray; height: 30px; width: 100%; display: flex; align-items:flex-end; margin-top:5px; } .left { background:lightblue; } .separator{ flex-grow:1; border-bottom:dotted 2px black; } .right { background:coral; }

<div class="row"> <div class="left">Left</div> <div class="separator"></div> <div class="right">Right With Text</div> </div> <div class="row"> <div class="left">Left With More Text</div> <div class="separator"></div> <div class="right">Right</div> </div> <div class="row"> <div class="left">Left With Text</div> <div class="separator"></div> <div class="right">Right With More Text</div> </div>


Use la propiedad de flex-grow para hacer que un elemento flexible consuma espacio libre en el eje principal .

Esta propiedad expandirá el elemento tanto como sea posible, ajustando la longitud a entornos dinámicos, como el cambio de tamaño de la pantalla o la adición / eliminación de otros elementos.

Un ejemplo común es flex-grow: 1 o, usando la propiedad abreviada, flex: 1 .

Por lo tanto, en lugar de width: 96% en su div, use flex: 1 .

Tu escribiste:

Por lo tanto, en este momento, está configurado en 96%, lo que se ve bien hasta que realmente aplastas la pantalla; luego, el divisor de la derecha se queda un poco hambriento del espacio que necesita.

El aplastamiento del div de ancho fijo está relacionado con otra propiedad flex-shrink : flex-shrink

De manera predeterminada, los elementos flexibles están configurados en flex-shrink: 1 que les permite encogerse para evitar el desbordamiento del contenedor.

Para deshabilitar esta función, use flex-shrink: 0 .

Para obtener más detalles, consulte la sección El factor de flex-shrink en la respuesta aquí:

  • ¿Cuáles son las diferencias entre base flexible y ancho?

Obtenga más información sobre la alineación flexible a lo largo del eje principal aquí:

  • En CSS Flexbox, ¿por qué no hay propiedades "justify-items" y "justify-self"?

Obtenga más información sobre la alineación flexible a lo largo del eje transversal aquí:

  • ¿Cómo funciona flex-wrap con align-self, align-items y align-content?