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>></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?