Articles of flexbox

Flexbox: centro verticalmente y tamaño de coincidencia

Tengo dos botones uno al lado del otro usando flex y tengo sus contenidos centrados verticalmente, que funcionan muy bien hasta ahora. Sin embargo, cuando mi sitio se visualiza en páginas para dispositivos móviles (utilizando un diseño receptivo para escalar la página), el segundo botón, que tiene menos texto, adquiere un tamaño diferente al de […]

Contenedor flexible con dos columnas; la segunda columna tiene cuatro filas

Tengo problemas para mostrar el siguiente diseño en flex. Tengo 5 cajas y quiero dividir mi contenedor en dos, mostrando una caja verticalmente y las otras 4 verticalmente. Aquí está mi CSS: .trades, .trade-panel { flex: 1; } .layout-4-5 { flex-direction: column; } .layout-4-5 > div { width: 50%; } Luego establezco la base del […]

¿Cómo centrar elementos en la última fila en CSS Grid?

Estoy usando una cuadrícula de CSS para diseñar algunos elementos como este … #container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 20px; margin: 10px; } Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item ¿Cómo puedo hacer […]

La propiedad de base flexible IE 10-11 se comporta de forma diferente que los navegadores webkit

Intento usar el objeto Media , que consiste en un Media-body Media-figure y una Media-figure . El HTML y las clases siguen este formulario (el orden no debería importar). .Media .Media-figure .Media-body El CSS simple es (sin prefijos): .Media { display: flex } .Media-figure { flex: 0 0 auto; /* same as… flex-grow: 0; flex-shrink: […]

Ancho de control de niños individuales en contenedor flexible

Estoy tratando de lograr el efecto de que las cajas con la etiqueta “HALF” ocupen solo el 50% del ancho (es decir, comparten la primera fila de manera pareja). El requisito básico es que permanezcan en un solo contenedor. ¿Es esto posible de usar flexbox? He intentado jugar con flex-grow , flex-shrink y flex-basis pero […]

Haga que los artículos flexibles se envuelvan en contenedores flexibles nesteds antes de que los contenedores se envuelvan en el contenedor principal

Si tengo un contenedor de FlexBox que contiene varios contenedores, ¿cómo puedo hacer que los artículos contenidos en los contenedores se envuelvan antes que los contenedores mismos? Por ejemplo ( codepen ): HTML CSS column, row, widget { background: RGBA(0,0,0,.2); margin: 1em; display: flex; flex-wrap: wrap; align-items: top; align-content: flex-start; } row { flex-direction: row; […]

Horizontalmente centro el elemento flexible entre 2 elementos flexibles de diferentes anchuras

Digamos que tengo 3 divs mostrados horizontalmente con flexbox : | |-div1-| |-center-div-| |-wider-div-| | Y quiero que el centro div esté alineado con el centro del padre. ¿Cómo puedo lograr esto? justify-content centrará los 3 de los divs basados ​​en la sum de todos sus anchos, y aplicar align-self: center al div del medio […]

Superponer dos elementos centrados utilizando CSS flexbox

Intento centrar absolutamente dos elementos en el medio de la página, uno detrás del otro. La intención es tener una página que sea totalmente receptiva con un círculo en el medio que tiene un efecto de pulso detrás. Aquí hay un violín de lo siguiente: html, body { height: 100%; width: 100%; } body { […]

Agregar línea divisoria entre elementos flexibles con distribución de espacio igual

Tengo una lista con diferentes elementos que tienen anchos automáticos (no se puede dar un ancho fijo en mi caso). Uso justify-content: space-between porque mi primer elemento debe comenzar al principio del contenedor y mi último elemento al final. Todo lo anterior funciona bien, pero cada vez que trato de agregar una línea entre estos […]

¿Por qué el elemento inline-flex con clearfix tiene un espacio en blanco raro?

Tengo un comportamiento extraño de un elemento en inline-flex al aplicarle un clearfix. Cuando establezco un clearfix en un elemento que tiene una propiedad de visualización inline-flex aparece el extraño espacio en blanco delante de él: Pero cuando se usa el inline-block el comportamiento es diferente: No entiendo por qué inline-flex tiene un comportamiento diferente […]