Articles of flexbox

Alinear a la derecha la propiedad Float

.header { display: flex } .logo, .contribute, .class 1, .class 2 { display: inline-block; margin: auto 0; } <nav En esta .header tiene display: flex; conjunto. .logo , .contributor , .class 1 , .class 2 tiene display: inline-block; establecer y son hijo a padre .header clase de .header , que es flexible. ¿Cómo podemos asegurarnos […]

El componente angular destruye la información de altura de flexbox para sus elementos secundarios

Tengo un contenedor padre de flexbox cuyo flex-grow da a mi elemento div contiene tanta altura como está disponible. Los hijos de este elemento div por supuesto tienen height:100% . Esto funciona bien Pero cuando tengo un componente angular entre parentContainer y contentContainer, así: El componente angular restablece la altura a 0px, por lo que […]

Artículos flexibles que desbordan contenedor en Safari

Por alguna razón, los artículos flexibles no se quedan dentro del contenedor en Safari. Así es el aspecto del diseño en Chrome y Firefox: Esto es lo que parece en Safari: Aquí está mi código: #div1 { background: black; width: 250px; height: 600px; display: flex; flex-direction: column; padding-bottom: 5px } #div2 { background: pink; color: […]

Relleno interno y borde para una grilla de flex-box 2×2

Tengo un problema con 2×2 que traté de lograr usando flexbox. Estoy tratando de lograr algo como esto. Cada grilla debe contener la misma cantidad de relleno. También se requiere agregar bordes solo adentro. (Dentro de la cuadrícula, como una cruz) Este es el código que he ideado pero no funciona correctamente. HTML CSS .info-box […]

¿Cómo cambiar la envoltura de flexbox?

Tengo una caja flexbox receptiva con tarjetas renderizadas dinámicamente (de 1 a 10 tarjetas representadas por cada llamada api) en mi aplicación. Casi hace exactamente lo que yo quiero que haga, excepto la manera en que se envuelve. Digamos que rendericé 10 cartas, si cambio el tamaño de la pantalla para que se convierta, por […]

Posibilidad de usar CSS Flexbox para estirar los elementos en cada fila y mantener un ancho constante.

Estoy tratando de obtener un grupo de div (con anchos iniciales) para estirar a través de un contenedor, ampliando sus anchos cuando sea necesario. Esto funciona muy bien usando la pantalla: flex, sin embargo, si se ajusta a una nueva línea, no quiero que los elementos de la nueva línea se estiren si queda espacio […]

Ancho de Flexbox roto en IE

Tengo una lista de elementos. Cada elemento de la lista contiene un botón de radio de un ancho desconocido y una lista desplegable que me gustaría ocupar el rest del ancho del contenedor. Mi código funciona en Chrome, pero no en IE11. ¿Alguna idea de lo que estoy haciendo mal? HTML: …code for radio button… […]

pantalla: flex no funciona en CSS

En mi plantilla 1111111 222222 ng-switch will be true only once; hence the red div will be only one and the rest will be blue ng-switch will be true only once; hence the red div will be only one and the rest will be blue . CSS se ve así: div.summary-card { display: inline-block; margin: […]

¿Cómo hacer un pie de página adhesivo y aún así poder hacer contenido de flexbox desplazable?

Estoy tratando de lograr el pie de página adhesivo (versión flexbox). Sin embargo, no puedo encontrar una solución que funcione si también quiero tener la capacidad de tener contenido desplazable dentro de un flex: 1 div (que requiere que los padres tengan height: 100% ). Aquí hay un violín para demostrar el problema: https://jsfiddle.net/gfaqLh42/6/ Como […]

Hacer flex niños en línea bloque

Me gustaría que los niños flexibles se rendericen inline-block modo que el border-bottom quede por debajo del ancho del border-bottom en vez del ancho del contenedor. Aparentemente, los niños flexibles no pueden configurarse como bloque en línea. ¿Hay alguna solución a este problema? .menu { display: flex; flex-flow: column; list-style: none; padding: 0; } .menu […]