Articles of flexbox

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

Acolchado inferior / superior en el diseño de la caja flexible

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%; […]

Alineación de elementos de grilla en toda la fila / columna (como elementos flexibles)

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