Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Flexbox es un sistema de maquetación especialmente apropiado para hacer estructuras de una sola dimensión (filas o columnas, en lugar de una rejilla de elementos). Para utilizar esta metodología de maquetación, utilizaremos el estilo display:flex.
Llamaremos contenedores flexibles a los elementos que hay dentro de un elemento que usa el estilo display:flex.
Usando display:flex o display:inline-flex en una capa, la convertimos en un contenedor flexible. En el primer caso, la capa se comporta con respecto a otros elementos de la página como si tuviese display:block, en el segundo, como si tuviese display:inline-block
Estilos fundamentales de display flex
flex-direction
Especifica cómo se sitúan los elementos flexibles dentro del contenedor.
<style>
.containerFlex c{
display: flex;
flex-direction:
}
.colKhaki{
background: Khaki;
}
.colSalmon{
background: salmon;
}
</style>
flex-wrap
- wrap: Los elementos de la capa se distribuirán en una o varias filas en función de su tamaño.
- nowrap: Los elementos de la capa estarán sí o sí en una sola fila.
<style>
.containerFlex{
display: flex;
flex-wrap: ;
}
.column{
border:1px solid black;
width:
}
</style>
flex-flow
<style>
.containerFlex{
display: flex;
flex-flow: ;
}
.colKhaki{
background: Khaki;
}
.colSalmon{
background: salmon;
}
.column{
width:
}
</style>
Ejercicios con display:flex
Ejercicio 3 columnas con display flex
Ejercicio página sencilla con display flex
Sobre el ejercicio sencillo de HTML
Debemos poder mirar al ejercicio propuesto y dividirlo en capas o rectángulos. Las páginas web se estructuran en capas. ¿Cuántas capas tiene este ejercicio?.
Empezaremos a contar de fuera a dentro y de arriba a abajo y de izquierda a derecha.
Primero tenemos una capa contenedora. Dentro tiene dos columnas apiladas horizontalmente (para ello podemos usar float:left o display:inline-block).
Dentro de la primera columna, tenemos una foto y una lista de enlaces.
Dentro de la segunda columna, está el contenido de la web.
Tener la habilidad para ver la fotografía de una web y poder descomponerla en rectángulos de información es algo fundamental para poder hacer páginas web. Es el paso uno. A partir de ahí podemos empezar a maquetar. Un maquetador no empieza a maquetar por dónde sabe. Empieza a maquetar por el principio. Y el primer paso es saber hacer esta descomposición del diseño que nos han pasado.
Ejercicio anuncios en columnas con display flex
Alineación horizontal y vertical con display:flex
Conceptos
- Contenedor. En este elemento es en el que aplicamos el estilo display:flex.
- Item: Cada uno de los hijos flexibles que tendrá el contenedor en su interior.
- Eje principal. Los contenedores flexibles tendrán una orientación principal específica. Por defecto, es en horizontal (en fila).
- Eje secundario. Los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical, y viceversa.
justify-content
#wrapper{
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
<style>
.containerFlex{
display: flex;
justify-content: ;
}
.colKhaki{
background: Khaki;
}
.colGreen{
background: paleGreen;
}
.colSalmon{
background: salmon;
}
.col{
width:
}
</style>
align-items
<style>
.containerFlex{
display: flex;
align-items: ;
}
.colKhaki{
background: Khaki;
}
.colGreen{
background: paleGreen;
}
.colSalmon{
background: salmon;
}
.column{
width:150px
}
</style>
voluptas
beatae obcaecati dolorem asperiores libero nesciunt dignissimos.
align self
<style>
.containerFlex{
display: flex;
}
.colKhaki{
background: Khaki;
}
.colGreen{
background: paleGreen;
align-self: ;
}
.colSalmon{
background: salmon;
}
</style>
voluptas
beatae obcaecati dolorem asperiores
libero nesciunt dignissimos.
Ejercicio panteón con display flex
Páginas interesantes
order
Podemos establecer el orden en el que aparecen los componentes de una caja flexible. Por defecto aparecerán tal y como aparecen en el código HTML (equivale a order: 0)
<style>
.container{
display: flex;
}
.colKhaki{
background: Khaki;
order: ;
}
.colGreen{
background: paleGreen;
order: ;
}
.colSalmon{
background: salmon;
order: ;
}
.column{
width: 300px
}
</style>
Cambiar el tamaño de las columnas con flex
Usaremos este código:
flex: 0 0 100px;
Que es una abreviatura de este:
flex-grow: 0; /* do not grow - initial value: 0 */
flex-shrink: 0; /* do not shrink - initial value: 1 */
flex-basis: 100px; /* width/height - initial value: auto */
<style>
.container{
display: flex;
}
.rosa{
background: pink;
flex: 0 0 100px;
}
.naranja{
background: orange;
}
</style>
<div class="container">
<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>
Problemilla en firefox
Cuando en firefox usamos display flex y dentro de la capa tenemos una imagen, esta se deforma, en lugar de mantener sus proporciones.
Para evitar esto, le asignaremos este estilo a la imagen:
flex: 0 1 auto
flex: abreviatura de flex-grow, flex-shrink, flex-basis
Nos permite establecer cómo crece o decrece un elemento flexible dentro del contenedor en relación a los demás.
<style>
.container{
display: flex;
}
.rosa{
background: pink;
flex: 1
}
.naranja{
background: orange;
flex: 3
}
</style>
<div class="container">
<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>
Esta propiedad se puede volver más compleja, porque puede tener tres parámetros: flex-grow, flex-shrink y flex-basis.
Ejemplo
Supongamos que tenemos un contenedor al que llamaremos «wrapper» que tiene 300px de ancho.
#wrapper { display: flex;}
este contenedor tiene en su interior dos elementos, col1 y col2, que no tienen un ancho especificado. Vamos a establecer los siguientes valores para ambos de la propiedad flex: flex-grow, flex-shrink, flex-basis:
.col1 { flex: 3 1 100px;}
.col2 { flex: 1 2 100px;}
Como hemos establecido un flex-basis para cada elemento de 100px, nos quedarán aún 100px libres sin ocupar (300px del contenedor menos 100px del elemento col y menos 100px del elemento col2). ¿Como se reparte ese espacio disponible entre los elementos col1 y col2? En función del flex-grow: 3 partes para el elemento B (75px) y una parte para el elemento C (25px). Es decir, de inicio el elemento B ocupará 100px+75px = 175px de los 300px disponibles que mide el elemento A, y el elemento C ocupará 100px+25px=125px de los 300px disponibles del elemento A.
Ahora bien, supongamos que el elemento contenedor A mide 170px y no 300px. Eso quiere decir que habrá espacio negativo, porque los elementos B y C tienen un flex-basis de 100px cada uno, es decir, 200px, que es 30px mayor que los 170px del contenedor. En este caso el ratio que se usa es el flex-shrink, que recordemos que era 1 para el elemento B y 2 para el elemento C. Esos 30px se restarán del ancho de los elementos B y C en función de dicho ratio: al elemento B se le quitarán 10px y al elemento C se le quitarán 20px.
- flex-grow: Especifica el factor de crecimiento, es decir, cuanto crecerá el elemento en relación a los demás cuando hay espacio disponible del contenedor a ocupar. Por defecto es ‘0’, que es el valor que dimos en el ejemplo anterior a los tres elementos.
- flex-shrink: Determina el factor de reducción, es decir, cuanto decrecerá el elemento en relación a los demás cuando hay espacio negativo en el contenedor (el contenedor es más pequeño de los anchos combinados de los elementos que hay en su interior). Por defecto es ‘1’.
- flex-basis: Toma el mismo valor que la propiedad ‘width’ y establece el tamaño inicial del elemento antes de distribuir el espacio libre de acuerdo con los ratios de flex-grow o flex-shrink. Cuando se omite, su valor es ‘main-size’ (anteriormente, ‘auto’).