Articles of flexbox

¿Por qué la aplicación de uk-width-1-1 afecta a divs hijos de uk-grid pero no divs nesteds de hijos?

¿Por qué no se aplica el ancho del 100% en esta implementación (donde se aplica la clase uk-width-1-1 al div nested del elemento secundario del contenedor de la cuadrícula): Row 01 Row 02 Sin embargo, se aplica cuando se implementa de esta manera (donde se aplica la clase uk-width-1-1 al elemento secundario del contenedor de […]

flex-flow: el ajuste de columnas no estira el ancho del elemento principal

Cuando uso flex-flow: column wrap , el ancho del elemento principal no se alarga. *{ margin: 0; padding: 0; } .box{ background: #f03; position: relative; display: inline-block; /* top:10px; */ /* left: 10px; */ padding: 20px; } .in{ display: flex; align-items: center; flex-flow: column wrap; max-height: 300px; align-content: flex-start; justify-content: space-between; } .item{ background: #fe3; […]

La misma altura para las columnas de miniaturas en Bootstrap 3

He estado leyendo muchas respuestas sobre cómo tener las mismas columnas de altura dentro de la misma fila, pero ninguna parece funcionar en mi caso. Sé que la solución es probablemente algo tonto, pero no puedo resolverlo … Entonces, primero creé un style.css y lo importé en mi index.php de esta manera (también incluí la […]

Crear un div con texto e imagen a escala para adaptarse al espacio restante?

Me gustaría que un div contenga texto y también una imagen escalada automáticamente para ajustarse al espacio restante que el texto no ocupaba en el div. Llegué a la conclusión de que la forma más común de escalar un elemento img es a través de los estilos max-height / max-width. Pero ese valor es relativo […]

¿Centrado con CSS Transform o Flexbox cuál es mejor soportado?

Centrado con transformación CSS como este position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); VS Centrado con Flexbox como este display: flex; align-items: center; justify-content: center; ¿Cuál es mejor compatible y cuál es mejor y recomendable?

Centro del centro con Flexbox

Estoy tratando de colocar el logotipo en el centro de la página, pero luego quiero que el texto esté en el medio (centro) del logotipo y en la parte inferior de la página. Por lo tanto, está en el centro del logotipo centrado y en la parte inferior de la página. Entonces, en efecto, el […]

Agregue un div de superposición dentro de contenedores flexibles nesteds (cuadrícula de 3×3) en una celda específica

Tengo una grilla de 3×3 con concepto de flex-box, dentro de cada celda tiene otra grilla de 3×3. Estaba tratando de poner una Superposición sobre la grilla interna en una celda, pero no encontré cómo hacerlo. Encontré algunos ejemplos como este Overlay / hover a div en div contenedor de flexbox, pero no funciona en […]

Columnas Bootstrap en flexbox que no se envuelven en pantallas más pequeñas

Tengo una sección de mi sitio web que estoy usando el CSS a continuación en 2 divs, y a etiqueta para tener el contenido alineado verticalmente en el centro. El problema es que con las propiedades de estilo flexible, cuando la ventana es <768px, idealmente, el contenido cambiaría de diseño y cada col-md-4 se astackría […]

Cómo obtener tres columnas y dos filas (1 x 2 x 2) con flexbox

Quiero lograr el siguiente resultado con Flex si es posible. Sepa cómo hacer eso con CSS, pero no muy familiarizado con Flex. La razón por la que quiero hacer eso es doblarlo para obligarme a escribir códigos concisos y más fáciles de mantener. .banner { width: 20%; height: 100%; position: relative; float: left; overflow: hidden; […]

flotar no funciona, ¿esto se debe a las propiedades de flexión?

Quiero cambiar algunas propiedades en el vuelo estacionario. Por alguna razón, no funciona cuando uso un selector de clase. Este mínimo básico funciona: .item { width: 50px; height: 50px; background: red; } .item:hover { background: orange; } #item1:hover { background: orange; } Sin embargo, tengo un caso (ver violín) donde no funciona y realmente me […]