Articles of flexbox

CSS: Flexbox dentro de Flexbox

Estaba jugando un poco con las flexboxes y quería combinar un contenedor de columna y fila. La pregunta que tengo es: ¿Por qué los elementos de fila colocados dentro de la columna no abarcan todo el ancho del contenedor flexible? El código de ejemplo se muestra aquí: js-fiddle HTML: /* CSS: */ .flex-container { color: […]

Elementos Flex se superponen en Chrome e IE11

Intento crear un diseño de Flexbox de altura fija que desplaza el contenido interno cuando el contenido interno es demasiado grande. Además, si el contenido no causa desplazamiento, quiero arreglar un div con botones en la parte inferior del contenedor. Tengo un diseño que funciona perfectamente en Firefox pero en Chrome hace que el botón […]

Hacer que los elementos en una flexbox ocupen todo el espacio vertical y horizontal

Actualmente tengo elementos dentro de un contenedor, cada uno de los cuales contiene una imagen. Quiero distribuir estos en las cuatro esquinas o el contenedor, usando flexbox. Las imágenes se distribuyen correctamente en sentido horizontal, pero no ocupan todo el espacio disponible verticalmente. Esto es lo que parece en este momento: Aquí está mi marcado: […]

la propiedad Align-Self en flexbox no está funcionando?

Estoy tratando de entender la flex box: quiero hacer que el “primer” bloque se extienda para que coincida con el ancho completo del navegador, y el “segundo” bloque de tamaño fijo y alineado a la izquierda. Así que utilicé align-items: flex-end en el elemento primario ( ) e intenté estirar el primer bloque usando align-self: […]

Altura dinámica Bootstrap + Flexbox

He añadido este CSS para flex-box en bootstrap a mi sitio: http://www.bootply.com/126437 el problema es el siguiente: funciona para ambas en mi contenedor row-flex row-flex-wrap (las secciones tienen la misma altura) pero el contenido dentro de la segunda sección no se extiende a su altura máxima para padres. … some content Welcome … some more […]

¿Puede Flexbox manejar diferentes tamaños de columnas pero una altura de fila consistente?

Solo estoy aprendiendo cómo funciona flexbox y quiero construir un prototipo muy tosco para ver si flexbox puede manejar este diseño. Básicamente, quiero ver si Flexbox puede soportar una tabla de 4 columnas con ancho y alto variables, pero con una altura de fila consistente. No estoy seguro de estar explicando el diseño tan bien, […]

Menú desplegable que se superpone a su contenedor dentro de flexbox

Estoy trabajando en mi sitio personal. El encabezado principal se coloca en un flexbox: HTML: Menu 1 Sub-Menu 1 Sub-Menu 2 Menu 2 CSS: header { display: -webkit-flex; display: flex; justify-content: center; overflow: auto; height: 20vh; width: 100%; align-items: flex-end; z-index: 999; } header .content { width: 50vw; height: auto; position: relative; display: -webkit-inline-flex; display: […]

Pedido de cambio de Flexbox con columna

First images presenta grid en PC: Las segundas imágenes presentan cuadrícula en dispositivos móviles: Como puede ver, necesito cambiar el orden y la cuadrícula. Intento utilizar flexbox, pero necesito agrupar B & C en PC y obtener A igual altura. Condiciones importantes: En PC Una altura es igual a sum B y C En el […]

¿Cómo envolver cuatro columnas en dos filas de dos columnas con flexbox?

Estamos utilizando flexbox e intentando lo siguiente a continuación. El objective es tener una columna por artículo en puntos de interrupción móviles, dos columnas en puntos de interrupción de tableta y cuatro columnas en puntos de interrupción de escritorio. El ejemplo usa solo cuatro elementos, pero digamos que tenía 5 o 6 elementos, luego solo […]

Flexbox nested con 100% de altura y barra de desplazamiento en el elemento (no en el navegador)

En el siguiente código, ¿cómo puedo hacer que el contenedor de article crezca automáticamente para consumir el espacio vertical restante debajo de él, pero la barra de desplazamiento permanezca solo para ese elemento? En otras palabras, solo quiero desplazar el interior del artículo y no toda la ventana del navegador. ¿Hay una solución de CSS […]