Articles of flexbox

El margen automático de Flex no funciona en IE10 / 11

Tengo un diseño complejo donde centro varios elementos vertical y horizontalmente con flexbox. El último elemento tiene margin-right:auto; aplicado para empujar los elementos hacia la izquierda (y negarlos para centrarlos). Esto funciona correctamente en todas partes excepto en IE10 / 11 y me está volviendo loco. Muestra HTML / CSS: #container { display: -ms-flexbox; display: […]

CSS cuadrícula de cuadrados con flexbox

Estoy tratando de crear una cuadrícula de cuadrados receptiva. Los cuadrados deben redimensionarse para ajustarse al ancho de la ventana gráfica. Los cuadrados no deben cambiar de tamaño cuando se cambia la altura de la ventana gráfica. Obtuve cómo ajustar el ancho de cada cuadrado, pero no sé cómo hacer que los elementos cuadren y […]

desbordamiento de firefox: no funciona con flexbox nested

Diseñé un diseño de 100% de ancho y 100% de altura con css3 flexbox, que funciona tanto en IE11 (y probablemente en IE10 si la emulación de IE11 es correcta). Pero Firefox (35.0.1), overflow-y no está funcionando. Como puede ver en este codepen: http://codepen.io/anon/pen/NPYVga Firefox no está desbordando correctamente. Muestra una barra de desplazamiento html, […]

Bootstrap 4 Navbar y contenido de relleno de flexbox

Tengo que crear un diseño en el que una cuadrícula de contenido tenga que estar en la página restante completa, pero el diseño también tiene una barra de navegación. Para hacer esto, decidí colocar la barra de navegación en un contenedor flexible y el contenido en una fila con una altura del 100%. Necesito el […]

Desplazamiento de un flexbox con contenido desbordante

Aquí está el código que estoy usando para lograr el diseño anterior: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { […]

Margen colapsando en flexbox

Normalmente, en CSS, cuando un padre y su último hijo tienen un margen, los márgenes colapsan para crear un margen único. P.ej article { margin-bottom: 20px } main { background: pink; margin-bottom: 20px; } footer { background: skyblue; } Item 1 Item 2 Footer Como puede ver, aunque se especifica un margen de 20 20px […]

¿Cuáles son las diferencias entre flex-grow y ancho?

Empecé a usar el flexbox recientemente y a menudo viene la situación en la que necesito distribuir espacio en el eje principal entre los elementos. A menudo dudo entre el width y flex-grow . Por ejemplo, si quiero que un elemento mida 2 medidas, y el otro 1 medida, que sum hasta 100%, tengo dos […]

Cree una fila de elementos de Flexbox con una altura máxima definida por un niño

Intento crear un diseño de Flexbox que haga algo que pensé que sería un poco más fácil, pero tengo problemas para encontrar la forma correcta de hacerlo. Quiero tener una fila de elementos con altura dinámica que permita que un niño crezca tan alto como sea necesario, pero limita la altura del otro elemento para […]

¿Cómo mantener los elementos flexibles envueltos del mismo ancho que los elementos en la fila anterior?

Tengo una que es una caja flexible y un grupo de s que son los elementos flexibles. Estoy intentando que el tenga un ancho flexible, que se mantenga entre dos tamaños con min-width y max-width. Funciona muy bien siempre que estén en la misma línea. Sin embargo, cuando se envuelven, los s en la nueva […]

Flexbox CSS3: pantalla: caja vs. flexbox vs. flex

Me convertí ayer en un sitio web en la escuela que usa la statement css3 flexbox. Nunca usé eso antes. Así que googleé un poco. Y encontré muchos estilos diferentes de las declaraciones flexbox. Algunos tipos escriben display: box; , algunos usan display: flexbox; y otra display: flex; . Entonces, ¿cuáles son los diferentes? ¿Qué […]