Articles of flexbox

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

base flexible y tamaño de caja

De acuerdo con la documentación de MDN de flex-basis flex-basis propiedad flex-basis calcula el tamaño de un elemento flexible relacionado con el cuadro de contenido, a menos que la propiedad CSS del box-sizing defina una opción diferente. Pero no obtuve el resultado deseado ni en Chrome actual ni en IE11. He escrito 2 ejemplos: .horizontal-layout […]

Columnas de CSS en cuadrícula max sin consultas de medios

¿Es posible definir una cuadrícula con un número máximo de columnas pero permitir que los elementos se ajusten en nuevas filas cuando cambia el ancho de la pantalla? Tengo clases implícitas que permiten que las filas se ajusten a nuevas filas, pero no hay un número máximo de columnas. Aquí hay un bolígrafo de un […]

Hacer que el ancho del contenedor flex crezca a medida que sus hijos

Este es un diseño simplificado: Y esto es CSS simplificado: .root { background-color: red; overflow: auto; width: 300px; } .container { background-color: green; display: flex; height: 50px; } .cell { background-color: black; height: 30px; } .contact { width: 400px; } Esto es jsFiddle . Es algo inesperado para mí que el ancho del container no […]

pantalla: flexión; vs calc (); actuación

Hoy comencé en una discusión en la que me pregunto cuál es la forma más eficaz de tener dos divs uno al lado del otro. Por un lado, me encanta usar display:flex; En el otro lado, existe la opción de usar calc() , la razón es que nuestro div tiene relleno y necesitamos reducir el […]

flexionar elementos ignorando ancho

He reordenado algunos elementos en mi html usando flexbox en el diseño responsivo de un sitio web que funciona bien, pero los elementos no se redimensionarán correctamente. En un punto de interrupción, apliqué una clase de flexibilidad al div home-promos y reordené los elementos. Esto funciona correctamente. El problema surge cuando bash cambiar el tamaño […]

¿Cómo agregar un margen de 1px a un elemento flexible que es flexible: 0 0 25%?

Estoy probando algunos diseños diferentes con flexbox y tengo el siguiente problema. Tengo una galería de imágenes con elementos flexibles configurados flex:0 0 25%; y me gustaría agregarles un margen de 1px porque el 1% es demasiado grande. Así que me preguntaba qué debería hacer en este caso. Adjunto el siguiente ejemplo. #foto-container { display: […]

Alineación vertical no funciona en div

Estoy tratando de alinear verticalmente un div pero no funciona en absoluto por alguna razón. ¿Qué estoy haciendo mal? body { border: 1px solid red; height: 500px; } #contactUs { border: 1px solid blue; vertical-align: bottom; } Contact Us Nota: No quiero respuestas de posicionamiento absolutas.