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 { […]
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 […]
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 […]
¿Alguien puede mostrarme la diferencia entre align-items y align-content ?
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: […]
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 […]
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 […]
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 […]
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; } […]