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é […]
Tengo un diseño de Flexbox que contiene dos elementos. Uno de ellos usa relleno de fondo : #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; […]
Con un contenedor flex-wrap: wrap ajuste flex-wrap: wrap ajuste el conjunto, puede alinear los elementos desbordados al centro utilizando justify-content: center . ¿Hay alguna manera de lograr el mismo comportamiento para los elementos de la grilla que se desbordan utilizando la cuadrícula CSS? Creé un bolígrafo que muestra el comportamiento de flexión deseado .container-flex { […]