Articles of flexbox

Envolviendo elementos flexibles en la última fila

Tengo una img-gallery que ahora se está centralizando correctamente. El problema es que cuando la imagen se ajusta a una nueva línea, también se está alineando con el centro. Después de envolver, la imagen debe alinearse verticalmente con la primera imagen en la fila anterior. .gallery-links {justify-content: flex-start;} Esto lo hace casi resuelto. Pero después […]

Hacer que los elementos hermanos tomen el mismo ancho rompe el texto en ellos

Estoy tratando de establecer el ancho del div, y está contento con el ancho del párrafo de user-title en él. Este es el HTML y CSS: .panel { margin-bottom: 20px; width: auto; display: inline-flex; flex-direction: column; box-shadow: 0 2px 4px 0 #C6C2BF; padding: 0.5rem 1rem 1rem; } .user-title { display: flex; } .panel>div { display: […]

¿Por qué hay desplazamiento vertical en el contenedor principal?

Estoy muy confundido aquí. Dado que el body es 100% (ancho / alto) y main-container también es 100% (ancho / alto), ¿por qué hay desplazamiento vertical? Creé un jsFiddle para explicar la situación: http://jsfiddle.net/dcnnvgs1/1/ body, html { width: 100%; height: 100%; font-family: “Trebuchet MS !important”; background-color: #00b3b3; } .main-container { display: flex; flex-direction: column; flex-wrap: […]

CSS ajuste el texto no funciona en IE

Estoy enfrentando algunos problemas con algunos estilos que funcionan correctamente tanto en Chrome como en Firefox, pero no en IE. El problema al que me enfrento básicamente es que un estilo particular aplicado funciona bien en Chrome, pero no en IE. El texto no encaja en la columna. ¿Cómo reproducirlo? Eche un vistazo a este […]

Gestión de contenido justificado: espacio entre la última fila

Mi objective es tener tres elementos flexibles por fila y usar space-between modo que el primer y el tercer elemento en cada fila toquen el exterior del contenedor pero permanezcan espaciados a la misma distancia. Esto funciona según lo previsto, pero los problemas surgen en la segunda fila cuando el quinto elemento no se alinea […]

Limitar la altura de desplazamiento dinámicamente.

No sé cómo limitar la altura desde el div divisor sin fijar la altura máxima. Aquí está la situación: Quiero limitar mi div elemento de desplazamiento a la altura de mi img-item. pantalla: flex no funciona porque da la altura del div más alto (que es el elemento de desplazamiento) altura: 100% y la función […]

Diseño de mampostería solo para CSS

Necesito implementar un diseño de mampostería bastante deteriorado. Sin embargo, por varias razones no quiero usar JavaScript para hacerlo. Parámetros: Todos los elementos tienen el mismo ancho. Los elementos tienen una altura que no se puede calcular del lado del servidor (una imagen más varias cantidades de texto) Puedo vivir con un número fijo de […]

Espacio extra al centrar elementos utilizando flexbox

Estoy usando align-items y justify-content para centrar los elementos, mi html es: div w=250px h=250px w/h=300px w=350px w=350px mi código css es algo como: .flex-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; } (Dejo fuera un poco de código css sin importancia.) entonces el resultado será como: pero si […]

Eliminación de saltos de línea en el texto copiado de un contenedor flexible

Tengo una aplicación en la que tenemos una sola línea que es un contenedor flexible, que contiene varios tramos de texto que conforman la línea. Esto lleva a un escenario extraño, donde si copia la línea, obtiene saltos de línea entre cada intervalo. Mientras que si usas cualquier otra forma de trazar la línea, lo […]

Mantener la relación de aspecto de la imagen al cambiar la altura

Usando el modelo de caja flexible CSS, ¿cómo puedo forzar una imagen para mantener su relación de aspecto? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Observe que las imágenes se estiran o encogen para llenar el ancho del contenedor. Eso está bien, pero ¿podemos también hacer que se extienda o reduzca la altura para mantener las proporciones de la […]