Articles of flexbox

¿Es posible conseguir que Flexbox trabaje dentro de etiqueta?

Estoy usando flexbox para mostrar una etiqueta de texto junto con un valor numérico en una columna estrecha, de modo que el texto se trunca con puntos suspensivos si no se ajusta. Funcionó bien, hasta que tuve la necesidad de colocar toda la columna en una celda de la tabla, momento en el que el […]

Alineación de contenido verticalmente en contenedores de flexbox adyacentes

Tengo varios artículos decir tarjetas. Estas cartas deben astackrse horizontalmente y la altura debe ser la misma. Esto está sucediendo para mí. Cada tarjeta tiene una imagen, texto y un botón. La imagen y el texto de cada tarjeta deben tomar lo que sea la altura máxima en cualquier tarjeta, para que se alineen correctamente. […]

Evitar que un elemento secundario desborde a su elemento primario en flexbox

Estoy trabajando en una aplicación web que muestra una gran red de tarjetas, cuya altura es inherentemente variable. En aras de la estética, utilizamos jQuery’s .matchHeight() para igualar la altura de las cartas dentro de cada fila. El rendimiento de eso no se ajustó bien, así que hoy he estado migrando a una solución basada […]

Flexionar elementos que se superponen en IE11

Tengo dos divs: top div contiene un texto largo que ocupa varias líneas div inferior tiene min-height y flex-grow: 1 Cuando aparecía la reducción de la ventana al desplazamiento, en Chrome todo se muestra correctamente. Pero en IE11, la división superior se reduce a una línea y su texto se encuentra en la parte superior […]

¿Por qué flex-box funciona con un div, pero no con una tabla?

El siguiente fragmento simple da como resultado una sola página web que ocupa el espacio de pantalla disponible con un encabezado en la parte superior, un pie de página en la parte inferior, y el contenido principal ocupa la mayor cantidad de espacio posible (con un borde de puntos para facilitarlo). para ver): html, body […]

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