Articles of flexbox

Nidal flexbox no expandible

Intento crear un diseño de doble columna donde la segunda columna también es una cuadrícula con dos celdas dentro de ella. Sin embargo, las dos celdas de la cuadrícula anidada no se están expandiendo para llenar su contenedor. Cómo me gustaría: Como es: Cuando configuro .header-cell3and4 para tener flex: 1 lugar de display: flex daña […]

¿Cómo puedo usar Flexbox para alinear dos cuadros en una columna, al lado de una fila?

Lo que me gustaría hacer es bastante particular, así que dibujé una imagen para ilustrarlo: Puedo implementar esto fácilmente: pero no se ve bien en este sitio porque el elemento E es mucho más alto que C o D. Lo que me gustaría es que C y D se acumulen cuando la ventana del navegador […]

Columnas de centrado en flexbox

Este es mi objective : Flex trabaja y centra también. Pero ambos no funcionan: / La opción centrada ya no funciona debido a la flexión. Creo que esto se debe a esas partes del CSS con las dos pantallas: .row-flex, .row-flex > div[class*=’col-‘] { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* […]

Elementos Flex Flex de CSS Flexbox group 2

Intento aprender Flexbox y me quedo con un diseño que quiero crear. En el móvil, tengo el siguiente diseño: ¿Es posible obtener el siguiente diseño en el escritorio? El código: .wrapper { display: flex; flex-flow: row wrap; } .wrapper > * { padding: 10px; flex: 1 100%; border: 1px solid grey; } @media all and […]

Flex-box dos cajas envuelven al escalar el navegador de la ventana

Tenemos cuatro hijos en un padre. Y quiero hacer el efecto que ves en la imagen. description description description description El niño tiene un ancho de parámetro constante: 300 px; Pero no podemos editar el html (+ div). Solo podemos usar CSS para esa cosa. ¿Es eso posible? Mi inglés es pobre sry 🙂

css3 flexbox limit 4 elementos por fila de ancho automático

¿Cómo puedo lograr esto usando flexbox? Actualmente, estoy usando la tabla, pero envuelvo cada fila en un div para limitarlo a 5 elementos solamente. Quiero que todos los artículos se envuelvan solo en uno de los padres. Intenté Flexbox, pero quiero que el ancho de los artículos dependa de su contenido. Gracias chicos. .flexContainer { […]

¿Cómo alinear verticalmente el contenido sin anidar contenedores adicionales?

He tenido muchos problemas para alinear verticalmente un elemento en su contenedor. Implementé muchas sugerencias. Todos ellos sugieren envolver el contenido en otro div o contenedor. Esto ha causado todo tipo de problemas por varias razones que no abordaré, pero me gustaría elegir un nuevo requisito: que no esté envuelto en otro contenedor. Eso me […]

¿Por qué Firefox no respeta la altura de div en flexión, pero Chrome sí?

Esto se ilustra mejor con un simple ejemplo. Tengo un contenedor con display: flex y flex-direction: column , con una div única dentro con height: 300px y flex: 1 . Chrome representa el div nested en 300px de altura, pero Firefox lo representa como una sola línea. ¿Es esto solo un matiz entre la implementación […]

Haga que dos elementos tengan la misma altura, uno con una barra de desplazamiento vertical

Estoy tratando de hacer que dos elementos div hermanos tengan la misma altura. El de ellos tiene un overflow-y y una barra de desplazamiento con contenido de altura variable. El div principal tiene contenido que también es de altura variable según el contenido dynamic y el ancho del navegador. El contenido principal div debería mostrar […]

Haga que los elementos de la lista flexible se escalonen en múltiples líneas en pantallas más pequeñas

Estoy tratando de hacer una lista de CSS flexible escalonar el texto en dos líneas en pantallas más pequeñas sin embargo, nada de lo que he probado parece funcionar. Intenté usar span y br en varias consultas de medios diferentes, pero fue en vano. Cualquier ayuda sería muy apreciada. Así es como me gustaría que […]