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 ...
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 ...
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;
...
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 ...
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 ...
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 ...
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 ...
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.
...
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">...
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 ...
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: ...
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, ...
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{
...
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;
...
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-...
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 ...
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-...
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 ...
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-...
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. ...
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:...
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 ...
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:
#...
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 ...
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;
...
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-...
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 ...
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 ...
Only top scored, non community-wiki answers of a minimum length are eligible
Etiquetas relacionadas
flexbox × 160css × 125
html × 76
css3 × 35
html5 × 20
bootstrap × 10
responsive × 8
css-grid-layout × 7
grid × 6
flex × 6
javascript × 5
bootstrap-4 × 5
angular × 4
sass × 4
menu × 4
reactjs × 3
scss × 3
navbar × 3
lista × 2
web × 2
position × 2
jquery × 1
laravel × 1
wordpress × 1
formularios × 1