Preguntas con la etiqueta [flexbox]
Las alturas se representan de manera diferente en Chrome y Firefox [duplicado]
Descubrí que si configuramos un elemento a nivel de bloque con height:autoo height: 0~100%sin configurar la altura del padre con un valor explícito, y su hijo a nivel de bloque
Artículos flexibles de igual ancho incluso después de envolverlos
¿Es posible crear una solución CSS pura como esta? Los artículos tienen algunos min-width. Deberían crecer dinámicamente para llenar todo el ancho del contenedor y luego ajustarse a nuevas líneas.
Mi posición: el elemento adhesivo no es adhesivo cuando se usa flexbox
Estuve atrapado en esto por un tiempo y pensé en compartir esto position: sticky+ flexbox gotcha: Mi div adhesivo funcionaba bien hasta que cambié mi vista a un contenedor de
Haga que flex-grow expanda los elementos según su tamaño original
Tengo 3 botones seguidos y todos varían en ancho. Quiero que todos ganen el mismo ancho para llenar el ancho restante de la fila, de modo que el más ancho
¿Cómo especificar saltos de línea en un diseño de flexbox de varias líneas?
¿Hay alguna manera de hacer un salto de línea en un flexbox de varias líneas? Por ejemplo, para romper después de cada tercer elemento de este CodePen . .container {
¿Por qué el porcentaje de relleno/margen no funciona en elementos flexibles en Firefox y Edge?
Quiero tener un div cuadrado dentro de un flexbox. Entonces uso: .outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50%; } <div
¿Cómo deshabilitar columnas de igual altura en Flexbox?
Tengo tres elementos que intento alinear en mi diseño. Primero, tengo un div para comentarios, luego una entrada de búsqueda y luego un elemento div para sugerencias. Quiero que el
Cambiar el orden de los div con CSS según el ancho del dispositivo
Estoy trabajando en un sitio responsivo y encontré un problema interesante. Tengo algunos divs uno al lado del otro. Podría haber entre 2 y 6 aproximadamente. Cuando la pantalla no
100% de ancho en React Native Flexbox
Ya he leído varios tutoriales de Flexbox, pero todavía no puedo hacer que esta sencilla tarea funcione. ¿Cómo puedo hacer que el cuadro rojo tenga un ancho del 100%? Código:
Haga que los elementos secundarios del contenedor se encojan para ajustarse a medida que se envuelven
Estoy tratando de descubrir cómo funciona Flexbox (¿se supone que funciona?...) para casos como los siguientes: .holder { width: 500px; background: lightgray; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap;
Desplazando un flexbox con contenido desbordado
Aquí está el código que estoy usando para lograr el diseño anterior: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display:
Flexbox: 4 artículos por fila
Estoy usando un cuadro flexible para mostrar 8 elementos que cambiarán de tamaño dinámicamente con mi página. ¿Cómo lo fuerzo a dividir los elementos en dos filas? (4 por fila)?
Filas de igual altura en un contenedor flexible
Como puede ver, los list-itemsdel primero rowtienen lo mismo height. Pero los elementos del segundo rowtienen diferencias heights. Quiero que todos los artículos tengan un uniforme height. ¿Hay alguna manera
La "pantalla w" de Tailwind rompe otras divisiones
Tengo el siguiente cajero automático con pantalla: Y estoy tratando de crear un div que llene todo el espacio en blanco, pero cuando intento usar "w-screen" o cualquier valor alto
Alinear un elemento al fondo con flexbox
Tengo una divcon algunos niños: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> y quiero el siguiente diseño: ------------------- |heading 1 |