Articles of flexbox

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

Modelo de caja flexible – pantalla: flex, box, flexbox?

Muchos de nosotros somos conscientes de que los valores más antiguos de la propiedad de display , como en inline y en block están desactualizados después de que se haya introducido el nuevo modelo de caja flexible en CSS3. Pero, podríamos encontrar información diferente en la web en el mismo modelo de caja flexible. Podemos […]

Filas de altura igual en el diseño de cuadrícula CSS

Supongo que esto es imposible de lograr con Flexbox, ya que cada fila solo puede tener la altura mínima requerida para ajustarse a sus elementos, pero ¿se puede lograr esto utilizando la nueva cuadrícula CSS? Para ser claro, quiero la misma altura para todos los elementos en una cuadrícula en todas las filas, no solo […]

¿Cuál es la diferencia entre align-content y align-items?

¿Alguien puede mostrarme la diferencia entre align-items y align-content ?

Mejor forma de establecer la distancia entre los elementos de la caja flexible

Para establecer la distancia mínima entre los elementos de la caja flexible, estoy usando el margin: 0 5px en .item y margin: 0 -5px en el contenedor. Para mí, parece un truco, pero no puedo encontrar una forma mejor de hacerlo. Ejemplo #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: […]

Bootstrap 4: ¿Cómo hacer que la fila se estire la altura restante?

Intento hacer que el container-fluid y la segunda row estiren hasta la altura restante, pero no pude encontrar la forma de hacerlo. He intentado configurar los align-items/align-self para stretch pero tampoco funcionó. A continuación está mi estructura de código: Header Estoy usando Bootstrap 4 A6 . ¿Podría alguien sugerirme cómo hacer que el contenedor y […]

Establezca que los niños de flexbox tengan diferentes alturas para usar el espacio disponible

Utilizando un diseño de dos columnas de flexbox, ¿cómo se puede hacer que los niños de diferentes tamaños ocupen todo el espacio disponible, en lugar de que todos los niños tengan la altura del niño más alto de la fila? Configuré una demostración en jsbin que ilustra el problema. Me gustaría que todos los niños […]

Barra de navegación Bootstrap 4 con 2 filas

He creado una barra de navegación con Bootstrap 4 alpha 6 que tiene una gran marca / icono a la izquierda, y 2 navbar-nav con enlaces a la derecha del ícono. Un navegador tiene enlaces, y el otro navegador tiene icons. Está funcionando exactamente como quiero, excepto por una cosa. Me gustaría que las 2 […]

Altura 100% en la columna de flexbox niño

Estoy teniendo problemas con una columna de flexbox en que los elementos secundarios del elemento flexible no responden a la height en porcentajes. Solo he comprobado esto en Chrome y, por lo que entiendo, es solo un problema de Chrome. Aquí está mi ejemplo: HTML CSS .flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column; } […]