Articles of flexbox

Flex-wrap con hileras de diferentes alturas.

Estoy implementando tabs solo para css con enlaces hash-tag. Estoy muy cerca, pero no logro que la envoltura flexible funcione correctamente. Para que todo funcione como quiero, con :target (he hecho esto antes con los botones de opción y eso me da un poco más de flexibilidad), necesito todas las tabs y todas las secciones […]

¿Cómo puedo mostrar tres columnas por fila?

He estado tratando de mostrar tres columnas por fila. ¿Es posible usar flexbox? Mi CSS actual es algo como esto: .mainDiv { display: flex; margin-left: 221px; margin-top: 43px; } Este código pone todo el contenido en una sola fila. Quiero agregar una restricción para mostrar solo tres registros por fila.

¿Por qué el contenido está desbordado en flexbox?

Estoy experimentando un comportamiento que no entiendo. Cuando configuro una lista de credenciales con una altura máxima en la lista y un margen en los elementos de la lista, el contenido de los elementos de la lista desborda sus contenedores proporcionalmente al margen. .badgers { display: flex; flex-direction: column; max-height: 10em; overflow: auto; border: 1px […]

Alinee el centro de la fila en flexbox

Actualmente estoy intentando que mis columnas se centren utilizando flexbox, pero se está pegando a la izquierda cuando redimensiono el navegador. He intentado justificar el centro de contenido y el centro de alineación de elementos, pero es posible que no los coloque en los lugares correctos. ¡Si alguien sabe cómo arreglar esto, sería muy apreciado! […]

¿Puede flexbox detectar cuando se envuelve un elemento flexible?

Espero deshacerme de las consultas de los medios y simplemente usar flexbox para resolver mi problema, pero no estoy seguro de si esto es posible. A medida que la ventana se hace más pequeña, quiero que las columnas se reduzcan hasta que scopen su ancho mínimo. Una vez que scopen eso, la columna central saltará […]

¿Cómo hacer que Flexbox (flex-grow) tenga en cuenta el contenido para el tamaño?

¿Cómo podemos hacer que Flexbox deje de igualar el espacio en elementos hermanos cuando ambos elementos utilizan flex-grow: 1 . Esto es difícil de explicar por adelantado, por lo que aquí está el código seguido rápidamente por ejemplos de capturas de pantalla del problema y el comportamiento deseado. .Parent { display: flex; flex-direction: column; background-color: […]

Espacio Flexbox entre el comportamiento combinado con ajuste

Estoy usando flexbox para crear una bonita cuadrícula de mosaicos que se ajusta automáticamente cuando los mosaicos no caben en una fila. Uso justify-content: space-between para que los mosaicos se adhieran a los lados izquierdo y derecho del contenedor principal, y el espacio restante solo se distribuye “en el medio”, pero no a la izquierda […]

¿Cómo puedo controlar el número de elementos por columna en flexbox?

En un contenedor flexible tengo 5 artículos con una dirección de columna pero en un cierto ancho quiero mostrar 3 por columna y forzar a los demás a envolver ¿Hay alguna manera de hacerlo sin una altura fija? mi código : Item 1 Item 2 Item 3 Item 4 Item 5 .container { display: flex; […]

Reducir para ajustar el contenido en flexbox, o flex-based: ¿solución al contenido?

Tengo una aplicación web con la que estoy usando flexbox para el diseño. Intento llenar la pantalla (es una aplicación, no un documento) y, en la medida de lo posible, no especificar anchos o alturas fijas, ya que el contenido puede ser de todo tipo (¡diseño completamente fluido! ¡El sueño!) Así que necesito altura de […]

Edge no estira el iframe en un flexbox

El iframe en la siguiente demostración es un elemento flexible: * { margin: 0; border: 0; padding: 0; } html, body { height: 100%; } body { display: flex; } iframe { background: olive; flex: 1; } Pero no cubre el contenedor flexible: Si reemplaza el iframe con un div , funciona sin problemas. ¿Porqué […]