Articles of flexbox

¿Cómo envolver el texto alrededor de los objetos (como lo hace flotar) en flexbox?

Digamos que tengo una display: inline contenedor en display: inline con algunos hijos de texto y algunos hijos de inline-block : Si le doy al contenedor el siguiente CSS … (y cambio inline-block a inline-flex ) display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; … luego trata el elemento de texto como un elemento completo […]

¿Cómo alinear dt y dd lado a lado usando flexbox con dd múltiple debajo del otro?

Estoy tratando de crear una lista que consiste en pares clave-valor donde la clave está a la izquierda y los valores están en el lado derecho uno debajo del otro. Authors John Doe Jane Doe Max Mustermann Publishers Johne Doe Jane Doe Max Mustermann Mi problema es ¿cómo fuerzo un salto de línea entre cada […]

Forzar elemento flexible para abarcar todo el ancho de fila

Estoy tratando de mantener los primeros 2 elementos secundarios en la misma fila, mientras que el tercer elemento se encuentra en su propia parte inferior en todo su ancho, todo mientras uso flex. Estoy particularmente interesado en usar las propiedades flex-grow y flex-shrink en los primeros 2 elementos (que es una de mis razones para […]

Los elementos centrados dentro de un contenedor flexible están creciendo y desbordándose más allá de la parte superior

Debo estar olvidando algo fundamental con mi flexbox centrada vertical y horizontalmente. El contenedor está dentro de un elemento primario con desplazamiento vertical, y cuando el contenedor se vuelve demasiado alto, crece más allá de la parte superior principal, recortando el contenido. El fondo queda puesto. Intente ajustar la altura de la vista o agregue […]

Flexbox con encabezado fijo y pie de página y contenido desplazable

Estoy tratando de hacer un trabajo de diseño de flexbox. No soy un experto en HTML / CSS. 🙁 Tengo un diseño de flexbox con encabezado y pie de página fijos y contenido que ocupa el rest de los bienes raíces disponibles de la página. Cuando coloco datos en el área de contenido que es […]

Ajuste de objeto CSS: contener; Mantiene el ancho de la imagen original en el diseño.

Estoy tratando de hacer que mis imágenes respondan dentro de algunos contenedores de flexbox usando object-fit: contain , y mientras las imágenes cambian de tamaño, el diseño parece mantener el tamaño de la imagen original, lo que hace que aparezca una barra de desplazamiento. Al verificar el ancho de la imagen usando Chrome Dev Tools, […]

Orientación de elementos flexibles en la última fila o específica

Mi problema es que quiero el flexbox con ancho de rango variable, y todo funciona bien, pero no en la última fila. Quiero la misma dimensión para todos los niños, incluso cuando la fila no está llena de niños (la última fila). #products-list { position:relative; display: flex; flex-flow: row wrap; width:100%; } #products-list .product { […]

¿Cómo envolver flexbox en múltiples filas y columnas?

¿Estoy tratando de construir una galería en forma de mampostería, pero no puedo entender cómo envolver flexboxes? Obtuve una lista de UL simple y agregué el estilo necesario, pero las cosas no están flotando y ajustándose como debería. .masonry { margin: 48px -2px; padding-left: 0; list-style: none; align-items: flex-start; flex-direction: row; flex-wrap: wrap; display: flex; […]

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