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: […]
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 […]
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, […]
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 […]
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 { […]
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 […]
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 […]
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 […]
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 […]
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é […]