Articles of flexbox

¿Por qué los elementos del cuadro de flexibilidad del tamaño de un ancho porcentual no aumentan correctamente el ancho de una tabla de envoltura que tiene un ancho no especificado (es decir, automático)?

Por favor, eche un vistazo a este fragmento: table { background-color: yellow; box-shadow: inset 0 0 1px red; max-width: 100%; /* You would get similarly strange behavior with collapsing borders: */ /* border-collapse: collapse; */ } td { background-color: lightgreen; box-shadow: inset 0 0 1px blue; max-width: 100%; } .flex { max-width: 100%; display: flex; […]

El navegador dice que flex-basis: contenido es “Valor de propiedad no válido”

Dado: .layout { display: flex; flex-wrap: nowrap; align-items: stretch; } .layout aside, .layout main { min-width: 100px; } .layout aside { flex: 0 0 content; background-color: red; } .layout main { flex: 1 1 content; background-color: green; } Line 1 Line 1 Line 2 Line 3 Ejemplo en vivo Mis intenciones son: a un lado […]

¿Puedo tener una línea entre las filas de flexbox?

Tengo una navegación horizontal, que es algo larga, y necesita ser reorganizada para pantallas estrechas. Utilicé flexbox para hacer que fluyera en varias filas. Pero con muchas filas, la división entre los elementos de navegación no es tan obvia. Traté de ponerles un borde en la parte superior, y funciona, pero el borde es, por […]

¿Cómo cambiar el ancho de una columna de CSS Flex-Box?

Tengo un menú div que llena el 100% de la altura de su contenedor, y junto a él, a la derecha, están las secciones de encabezado , cuerpo y pie de página . Logré hacer esto con la CSS flex property . Sin embargo, quiero cambiar la cantidad de ancho que saca el div del […]

Disposición de escritorio y dispositivos móviles Flexbox sin contenedores nesteds

Tengo 3 divs que deben estar en un cierto orden para el diseño del móvil, pero tengo que dividir el 2º div como una barra lateral para el diseño del escritorio. Entonces para el móvil: ===== | div1 | ===== | div2 | ===== | div3 | ===== Y para escritorio: ===== ===== | div1 […]

Usar flex-basis para controlar la cantidad de elementos que se muestran en la línea

Quiero empujar elementos para ocultarlos mientras uso flex. Por ejemplo, si flex-basis es 50%, muestra solo dos elementos flexionados en el espacio dado mientras que los otros elementos están en overflow:hidden; territorio. O si flex-basis es del 25%, entonces solo se muestran 4 elementos flexibles y se ocultan los otros. es posible? .bargraph { display: […]

Alineación vertical medio no funciona con ul li

Intento alinear verticalmente el contenido de li medio pero no puedo hacerlo. #leftPanel { width:25%; display:table; } #leftPanel li { list-style: none; margin-bottom: 10px; width: 100%; } #leftPanel li img { margin-right:10px; } .activeBtn, .button5 { display: table-cell; float: none; width: 100%; background:#ccc; height: 100%; vertical-align:middle; } Location: Sub Location Issued To Non Conformance Standard […]

Hacer que la imagen tome la altura completa del elemento flexible

Tengo un contenedor que es 100vh (menos la altura de navegación fija). Dentro de este contenedor tengo algo de texto: title Que puede ser de cualquier longitud ya que el contenido es dynamic. Debajo de este texto tengo una imagen: La imagen debe llenar el rest del contenedor de 100vh (- altura de navegación). Yo […]

Ellipsis no funciona en contenedor flexible

Estoy intentando crear un diseño (que será un reproductor de música) con flexión. Tengo 3 botones (anterior, reproducir y siguiente, representados por los cuadrados rojos) que siempre quiero estar en la misma línea. Luego tengo información de la canción (hora actual, título de la canción y tiempo total) que quiero mostrar a la derecha de […]

CSS flexbox (flex-grow / flex-basis) – Mismo ancho, pero ya no se ajusta

Yo uso flexboxes para organizar elementos en mi página. Quiero que las flexboxes utilicen todo el espacio horizontal disponible, así que agrego flex-grow:1 . Entonces quiero que cada elemento en la misma línea sea del mismo tamaño (por ejemplo, 50% cada uno si hay dos elementos, 33% si hay tres, etc.), entonces agrego flex-basis:0 . […]