Preguntas con la etiqueta [flexbox]

Lista flexbox preguntas

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

¿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.

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

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

¿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 {

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

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

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

12
respuestas
290
votos
351.8k
vistas

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:

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

13
respuestas
352
votos
633.7k
vistas

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

10
respuestas
513
votos
880.6k
vistas

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

17
respuestas
195
votos
455.0k
vistas

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

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

12
respuestas
686
votos
1.0M
vistas

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 |