Información de etiqueta

Respuestas populares con la etiqueta

8 votos

Flex - Colocar elemento en espacio que sobra

El fallo es que estaba usando flex como row (por defecto), pero si utilizo la propiedad flex-direction: column puedo hacer todo lo que quería... Llevaba desde ayer dándole vueltas y ahora leyendo mi ...
ddiaalv's user avatar
  • 171
7 votos

¿Cómo funciona la alineación horizontal y vertical en las cajas flexibles?

Como se ilustra en la pregunta, en las cajas flexibles tenemos dos ejes, el principal (main axis) y el transversal (cross axis). Para alinear los elementos flexibles en el eje principal tenemos la ...
Ricky Ruiz's user avatar
5 votos
Aceptado

Cajas flex al 50% de la pantalla

En esta pregunta he visto la respuesta, y he copiado el css -> flex: 0 1 50%; en tu item-flex .cabecera{ width:100%; height:auto; display:flex; flex-direction:row; ...
lois6b's user avatar
  • 7,560
5 votos

¿Como puedo posicionar dos divs uno al lado del otro con flexbox?

!Buenas! El problema que tienes es esta parte de aquí: width: 50%; Aunque le introduzcas un 50%, no quiere decir que vaya a coger la mitad de la pantalla. Tienes que hacer bien los cálculos de las ...
D. Albarracín's user avatar
5 votos
Aceptado

personalizando el comportamiento del flex para responsive cards bootstrap

Te propongo esto, ya que usas Bootstrap en su versión 4 usemos únicamente las clases de su sistema de cuadrícula (grid system). Como bien sabemos, Bootstrap divide la pantalla del dispositivo hasta ...
Jheyman Mejia's user avatar
4 votos

Teoria sobre el sistema de rejillas css

una vez integres la librería puede ser Foundation o Bootstrap no necesitarás utilizar las reglas css grid ni flexbox simplemente le das las clases correspondientes a la documentación de dichas ...
Jonathan Schell's user avatar
4 votos

Flexbox descolocada

Primero deberías establecer la estructura principal y despues rellenar el contenido, aquí te dejo un fragmento de código para que puedas ver como crear la estructura que presenta tu diseño. Puedes ...
David's user avatar
  • 1,875
4 votos
Aceptado

Descolocación en proyecto web

Cuando suceden este tipo de cosas no hay que ponerse nervioso y, aunque cueste, tratarlo como una oportunidad para aprender o reforzar el conocimiento que se tiene sobre lo que estás maquetando. ...
phpMyGuel's user avatar
  • 14.8k
4 votos

¿Cómo crear cajas de diseño responsive flexboox?

Si te entendí correctamente puedes usar display: grid y grid-template-columns en el grid exterior y grid-template-columns: auto adentro un articulo de grid. <div class="grid-container">...
milmal's user avatar
  • 855
4 votos
Aceptado

Aumentar el ancho a los gráficos width - angular

Bueno la soluciòn que hice, es hacerle un seguimiento con Inspeccionar Elemento y ver que estilos se agregaban en cada direcctires de Angular. Observaba que se agregaban estas clases dinamicas mismo ...
PieroDev's user avatar
  • 1,980
3 votos

Cajas flex al 50% de la pantalla

Puedes usar flex:1 y ese div tendra el ancho restante. es decir si tu .item-primero tiene ancho 30%, el otro div tendra ancho 70% .cabecera{ display:flex; } .item-primero{ width: ...
information's user avatar
  • 6,460
3 votos
Aceptado

Como centrar div verticalmente con flexbox

Realmente no lo estás haciendo mal y está centrando verticalmente, pero no lo vemos porque el body se autoajusta al tamaño del div container. Pero si le damos una altura al body del 100% en este caso, ...
zeross's user avatar
  • 1,428
3 votos

Cajas flex al 50% de la pantalla

Haciendo más pruebas creo que he encontrado con lo que buscaba. Estaba aplicando la propiedad errónea, tenía que establecer a la caja la propiedad flex-basis. El resultado queda así .cabecera{ ...
Marcos's user avatar
  • 390
3 votos
Aceptado

¿Como puedo posicionar dos divs uno al lado del otro con flexbox?

yo en lo personal lo haría de la siguiente manera: .container { display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; border: solid red 1px; ...
Shassain's user avatar
  • 5,514
3 votos
Aceptado

CSS Flexbox - Centrar todos los elementos hijos con altura completa relativa al elemento padre

Quité el justify y el center. Pero no estoy seguro si era esto lo que querías. Por lo pronto tienen la misma altura y están alineados arriba. .abouts { display: -webkit-flex; display: -moz-...
Juan's user avatar
  • 5,665
3 votos

¿Cómo evitar que los divs hijos sobresalgan del div padre?

Debes agregar la propiedad flex-wrap: La propiedad flex-wrap establecida a wrap en el elemento padre permitirá organizar los elementos de manera que salten a la siguiente línea si no cuenta con ...
David E. Luna M.'s user avatar
3 votos

Aumentar el ancho a los gráficos width - angular

Creo que el problema es el ancho de pantalla, tienes configurado en el div fxFlex.sm="50" Eso provoca que el responsive fuerce a que ocupe la mitad del tamaño en las pantallas pequeñas-...
hmartin's user avatar
  • 186
3 votos
Aceptado

¿Como sobreponer un div de una imagen?

con position:absolute; pero siempre al colocar texto en una imagen debes agregar sombra para que se mas legible text-shadow: 2px 2px 3px #000; ejemplo: .main__container{ margin: 30px auto 30px ...
John's user avatar
  • 1,472
3 votos
Aceptado

Como puedo hacer que el navbar en fixed ocupe un espacio antes de ponerse encima

Lo que puedes hacer es ponerle a tu contenedor mission un margin-top: 70px; el margin debe ser el valor del tamaño de tu header, con eso al principio se ve que esta debajo del header. *{ font-...
ayaleil's user avatar
  • 179
2 votos

Problema con Css FlexBox el contenido no abarca el 100%

Usar un layour horizontal cuando vas a ordenar los elementos de forma vertical no tiene sentido. Deberías usar flex-direction: column para que los hijos se ordenen uno luego de otro en forma vertical. ...
gugadev's user avatar
  • 19.1k
2 votos

Problema con Css FlexBox el contenido no abarca el 100%

Una forma de resolverlo es usando: flex-basis: propiedad que especifica la base flexible, la cual es el tamaño inicial de un elemento flexible. Demo: * { padding: 0; margin: 0; outline:...
Marcos's user avatar
  • 33.8k
2 votos

no funcionan correctamente las reglas de flexbox en css3

El problema es que en el vídeo calculan el ancho para 4 divs teniendo en cuenta un margen de 10px width:calc((100% - 10px) / 4); y en tu codigo le das un ancho fijo de 100px, así que en una capa de ...
Arnau Castellví's user avatar
2 votos

Cuadricula con elementos de diferente tamaño con flexbox

no estoy seguro de a que layout quieres llegar, seria bueno que lo aclararas, pero mientras puedo sugerir algunas cosas: declara flex-flow, sin esta propiedad flexbox no funciona adecuadamente: #...
vis97c's user avatar
  • 21
2 votos
Aceptado

¿Cómo colocar cajas del mismo tamaño? Tengo un problema

La etiqueta figure por defecto tiene unos estilos predefinidos, y en este caso lo que te esta molestando es su margen. Con poner margin: 0, sería suficiente. Echa un vistazo a este artículo que creo ...
Fantsal's user avatar
  • 59
2 votos

Agrandar caja al 100% usando display:flex

El problema que estás teniendo es que necesitas agregarle un tamaño al div contenedor, ya que si no sus elementos hijos no saben cuanto deben de ocupar. Ejemplo: .cajaFlexible{ display:flex; ...
Francisco Romero's user avatar
2 votos
Aceptado

Ampliar al tamaño exacto del div

El elemento .color-novedad no tiene mucho sentido que sea flex ya que dentro tiene un elemento a que a su vez tiene un elemento div el cual es donde están las cajas que deseas acomodar. .color-...
gugadev's user avatar
  • 19.1k
2 votos
Aceptado

¿Cómo puedo insertar texto dentro de una caja flexible?

Al asignar un line-height: 150px; lo que estas haciendo es "forzar" la alineación vertical para la primer línea, es decir, la siguiente línea (eg: <div>Un dispositivo.</div>) va a estar ...
Marcos's user avatar
  • 33.8k
2 votos

Colocar de manera vertical inputs mediante flexbox

Ten en cuenta que al definir un contenedor flex el comportamiento aplica a los elementos hijos de éste. En tu caso el único hijo del div Fila3Formulario es el elemento form, por lo que es éste ...
Asier Villanueva's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible