Articles of flexbox

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 […]

División de divs en 2 columnas

Tengo un código como este: title1 article1 title2 article2 title3 article3 title4 article4 y quiero transformar esta columna de 1 línea en 2 columnas como esta: Ya intenté usar este código, pero ¿hay alguna forma diferente de dividir el div? .article-container { display: flex; flex-wrap: wrap; } .article { flex-grow: 1; flex-basis: 50%; } .article:after […]

Eliminar una gran brecha entre filas en el diseño de flexbox

Tengo una barra lateral que es más larga que el contenido (publicar vistas previas con miniaturas). Estoy usando flexbox para crear el diseño y cuando la barra lateral es más larga que las vistas previas, hay una gran brecha entre ellas. Quiero que cada fila no tenga un espacio intermedio como lo haría si la […]

¿Cómo hacer que los elementos de flexbox se reduzcan correctamente cuando están en un contenedor nested?

Si configuro un contenedor de flexbox nested como tal: … y luego establezca el ancho de grow2 de tal manera que sea más ancho que container1 y luego grow2 desborde container1. Creo que esto no debería suceder, ya que se supone que los elementos flexibles se encogen cuando son más grandes que el contenedor flexible. […]