Articles of flexbox

¿Cómo centrar horizontalmente y verticalmente dos imágenes una sobre otra?

Intento colocar dos imágenes una sobre otra, con ambas imágenes centradas horizontal y verticalmente dentro de su contenedor. Una de las imágenes tendrá su opacidad animada para revelar la imagen debajo. Las imágenes son del mismo tamaño, pero no sé el tamaño de las imágenes de antemano. También me gustaría hacer esto solo en CSS […]

Barra lateral Flexbox con ancho máximo

¿Es posible establecer el ancho máximo en la barra lateral en mi diseño de flexbox sin afectar el área de contenido (artículo)? Cambiar el ancho máximo ahora también afecta el área de contenido. Quiero la funcionalidad actual, con el diseño siendo receptivo, pero también estableciendo un ancho máximo en la barra lateral. Codepen HTML: Menu1 […]

la propiedad css de espacio en blanco está creando problemas con flex

Estoy enfrentando problemas con white-space:nowrap cuando hay contenedor flexible. Hay un container flex-direction:row; en el que hay dos flex:0 0 70px; divs con cierto ancho establecido usando flex:0 0 70px; y el main-content . En el main-content con flex-direction:column dos divs principales, header y el content . Ahora en el content , hay tres blade […]

css Flex div crecen a medida que crecen los textarea hijos (sin jquery)

Imagina que tengo lo siguiente div{ padding: 20px; } Do NOT expand this Expand this baby Quiero que cuando el contenido en textarea “expandir” crea un desbordamiento vertical para que expanda div principal, no para crear desplazamiento vertical.

¿Cómo puedo hacer que este contenedor de caja flexible se desplace en lugar de adaptar el ancho?

Quiero hacer que el contenedor de flexbox tenga un ancho del 100% y una barra de desplazamiento para ver el contenido desbordado. Ahora parece adaptar el contenido al ancho de la ventana y siempre toma el 100% de ancho sin que el contenido se desborde. https://codepen.io/UrsuGrizzly/pen/BmqPvm https://jsfiddle.net/duvq2e42/ #topimg { display: flex; min-width:100%; overflow-x:scroll; } #topimg […]

¿Cómo hacer que este diseño angular angular sea de altura completa en función del tamaño de la pantalla?

Quiero crear una cuadrícula de altura completa junto con un elemento de paginación siempre en la parte inferior de la pantalla. Estoy usando el diseño flexible para lograr esto. Puedo producir este resultado en una pantalla de altura fija (Mi estación de trabajo). Pero cuando cambio el tamaño del navegador o abro la aplicación en […]

Flexbox div no toma todo el ancho

Estoy tratando de entender cómo display:flex funciona, pero cada vez que lo configuro, los niños no toman todo el ancho. Esperaba que los tres divs obtuvieran un 33% del ancho de la pantalla. ¿Qué estoy haciendo mal? .flexbox { display: flex; } .flexbox div { border: 1px solid black; padding: 10px; } One Two Three

Excluir el primer elemento flexible del wrap

Tengo un footer que es un contenedor flex . Contiene una imagen de logotipo y cuatro elementos de texto después, totalizando cinco elementos flex que se centran horizontalmente en la ventana, permitiendo que cualquier espacio adicional se extienda de manera uniforme a la izquierda y derecha de los elementos colectivos, en lugar de los espacios […]

estiramiento flexible de la columna para ajustar el contenido

Compañeros desarrolladores de Goodday, Me gustaría crear un contenedor que permita que el contenido vaya de arriba a abajo y de izquierda a derecha. El contenedor primario debe estirarse para ajustarse pero dentro de los valores máximos definidos. He usado flexbox para este propósito, sin embargo, no consigo que el contenedor principal se estire para […]

¿Por qué mi imagen está distorsionada (encogida) en Firefox?

Este problema ocurre en Firefox. En Chrome, todo está bien. Tengo una imagen de lupa junto a mis campos de búsqueda. Sin embargo, en Firefox, la imagen está siendo distorsionada (encogida) y no puedo entender por qué. Aquí está el violín: https://jsfiddle.net/k01jLb28/3/ . Estos son los estilos que estoy aplicando a mis campos de búsqueda: […]