Articles of flexbox

¿Flexbox vertical alinea el contenido específico dentro de un contenedor?

Mi CMS tiene una configuración bastante rígida con 2 columnas con encabezados y contenido, como se muestra a continuación: .wrapper { overflow: auto; border: 1px solid #ccc; text-align: center; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .left, .right { float: left; width: 45%; padding: 5px; } Title […]

Alinear el contenido de los elementos flexibles al fondo

Muy simple, un contenedor tiene que estirar a sus hijos (tal como están), pero el contenido de los divs para niños debe estar alineado con el fondo, al igual que el extremo flexible, pero manteniendo la altura. Alguna idea sobre como hacer eso? Eche un vistazo a este bolígrafo: http://codepen.io/anon/pen/NAjRvo .container { height: 100px; background: […]

encogiendo flexboxes a la misma altura del cuadro más corto

Actualmente tengo un diseño de flexbox que se ve así: El azul es class = “wrap”, el naranja y los tres cuadros amarillos están contenidos en dos clases separadas = “wrap_col”, y cada cuadro amarillo está contenido en class = “wrap_item”. .wrap { display: flex; flex-flow: row wrap; margin: 0 auto; } .wrap_col { display: […]

¿Cómo podemos flexionar correctamente un elemento incrustado tanto vertical como horizontalmente utilizando la caja flexible?

He actualizado este problema con un caso de prueba más simple. El siguiente ejemplo es el problema en el que me he quedado atrapado. Si ejecuta el código HTML en un navegador, la pantalla se mostrará como se ve en la primera captura de pantalla a continuación. Sin embargo, si luego ingresa manualmente en el […]

Flexbox / Float – Diseño 2 1 2

Intento crear un diseño 2 1 2 usando Flexbox o flotadores como se ve en la imagen agregada a esta pregunta. ¿Hay alguna forma de hacerlo con éxito utilizando solo una lista ordenada de elementos? 1 2 3 4 5 1,2,4,5 son del mismo tamaño y 3 es del mismo ancho que los otros bloques. […]

La propiedad de desbordamiento no funciona en IE 11

Mi código a continuación funciona bien en la mayoría de los navegadores (Chrome, Firefox, Safari, Edge) pero no parece funcionar en IE11. Estoy leyendo sobre los problemas conocidos en caniuse pero no parece decir nada sobre IE11 y overflow . ¿Es esto un error en IE 11 o me falta algo? .container { display: flex; […]

Flexbox no centra el contenido verticalmente

Así que estoy tratando de usar flexbox para centrar mi nombre en el medio de la pantalla. Después de mirar muchos tutoriales, dicen que el único código que necesito para lograr esto es … div { display: flex; flex-direction: column; justify-content: center; align-items: center; } David jsFiddle Si prueba el código anterior, solo centra el […]

Margen inconsistente entre elementos flexibles en la última fila

Estoy usando flex . Parece haber una diferencia de margen inesperada entre dos elementos div : la tercera fila tiene un margen diferente entre los divs que las dos primeras filas: ¿Cómo modifico el código para que el margen de la tercera fila sea el mismo que las dos primeras filas? .container { display: flex; […]

Alineación vertical de dos elementos flexibles

Tengo un envase contenedor .container y dos elementos flexibles: item-one y item-two . Quiero centrar verticalmente el primer elemento y pegar el segundo en la parte inferior. No sé cómo alinear verticalmente el primer elemento en este contexto. HTML: Item One Item Two CSS: html, body { height: 100%; margin: 0; } .container { width: […]

Flexbox: reordenar y astackr columnas

Tengo tres columnas, que quiero cambiar el orden de un determinado tamaño de pantalla. El orden actual es de dos columnas de 1/4 de ancho con un ancho de 1/2 entre ellas. Quiero hacer que las dos columnas de ancho 1/4 tengan 1/2 anchos y astackrlas al principio. Puedo replicarlo usando flotadores, pero no puedo […]