Articles of flexbox

Edge / IE flex y problema de la barra de desplazamiento

Encuentro un problema con Edge / IE cuando uso flexbox. El contenido puede desbordarse, así que uso overflow-x: auto . La dirección de la flexión es columna, con flex-grow:1 en los elementos de contenido, por lo que no debería ser necesario el desbordamiento-y. Pero la barra de desplazamiento va por encima del contenido. Parece que […]

en flexbox ¿cómo empujar el elemento de la siguiente fila cerca del elemento superior derecho de la fila anterior, sin márgenes negativos?

Tengo tres elementos envueltos en un contenedor flexible, por dos en una fila: a b c ¿Hay alguna manera de empujar el elemento superior de la última fila, cerrar el elemento superior derecho, sin editar el código html y usar márgenes negativos? este código css ficticio demuestra lo que quiero obtener, pero sin márgenes negativos […]

¿Cómo centrar verticalmente una imagen usando flex box?

Estoy tratando de centrar verticalmente una imagen usando flex box. Este es mi código: Service at your fingertips! CSS: ion-content ion-grid { height: 100%; } ion-content ion-row{ height: 50%; } div.logo-part { width: 100%; height: 100%; display: flex; align-items: center; flex-direction: column; } img{ width:25%; text-align:center; } La imagen no se posiciona en el centro […]

Internet Explorer 10 no aplica flexbox en elementos en línea

De acuerdo con las especificaciones de flexbox, un elemento de flexión de intervalo (hijos de un contenedor flexible) se debe convertir en display:block . Internet Explorer 10 no aplica esta transformación y, por lo tanto, flexbox no funciona en elementos de span (en línea). Aquí un codepen de lo que quiero decir Solo puedo usar […]

Representación de ancho mínimo de forma diferente en dirección flexible: fila y dirección flexible: columna

Tengo un contenedor con display: flex y flex-direction: row . En ese contenedor hay un sub-contenedor también con display: flex pero con flex-direction: column . El problema es que si agrego una entrada en el sub-contenedor, el min-width de esa entrada se ignorará. Este es el código donde probé varios casos de entrada en flexbox: […]

Encabezado de texto superpuesto en la envoltura

Intento hacer mi primer sitio web de cuadrícula y todo va bien, pero por alguna razón, el texto del encabezado está abarrotado en un navegador más pequeño. He intentado jugar con relleno / márgenes de diferentes elementos. Intenté agregar alturas de línea, eliminar propiedades de flexión, nada ha funcionado. Quiero que mi escaparate h1 tenga […]

¿Cómo mostrar hr horizontalmente con flex?

Cuando use flexbox para el estilo, si el contenedor principal está configurado para display: flex , hará que se muestre verticalmente en lugar de horizontalmente. .container { display: flex; flex: 1; } Test

Hacer que los elementos flexibles tengan el mismo ancho en una fila

Si observa el ejemplo a continuación, quiero que los encabezados ( h4.child-title ) tengan la misma longitud dentro del contenedor principal. Pero no tengo éxito en lograr esto. Cualquier ayuda es apreciada. .top-level { display: flex; flex-flow: row wrap; } .section { display: flex; flex-flow: row nowrap; border: 1px solid; margin-right: 12px; margin-top: 12px; } […]

¿Cómo configurar los elementos de flexión a la misma anchura según el elemento con el contenido más largo?

Aquí está el escenario: .flex-container { display: flex; border: 1px solid black; } .flex-item { background-color: cornflowerblue; height: 1.7rem; padding: 0 1.2rem; flex: 1 1 33.33333%; white-space: nowrap; max-width: 33.33333%; } Foo Bar Long ass text here Los botones son del mismo tamaño, pero el problema es que no se escalan según el elemento flexible […]

luchando con una cuadrícula flexbox anidada

Intenté lograr un patrón de cuadrícula con un sistema de cuadrícula basado en un margen negativo (susy) y fallí. Intenté usar flexbox, pero no estoy seguro de si es realmente posible, pensé que el mejor enfoque sería 2 columnas (lado A y B) y le daría a las cajas (1) la altura de flexión del […]