Flexbox es un sistema de maquetación especialmente apropiado para hacer estructuras de una sola dimensión (filas o columnas, en lugar de una regilla 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.
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.
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: ;
}
.col{
border:1px solid black;
width:
}
</style>
flex-flow
<style>
.containerFlex{
display: flex;
flex-flow: ;
}
.colKhaki{
background: Khaki;
}
.colSalmon{
background: salmon;s
}
.col{
width:
}
</style>
Ejercicio 3 columnas con flex
Ejercicio anuncios en columnas con flex
Alineación horizontal y vertical con display:flex
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
#wrapper{
display: flex;
align-items: flex-start | flex-end | center | baseline | stretch;
}
<style>
.containerFlex{
display: flex;
align-items: ;
}
.colKhaki{
background: Khaki;
}
.colGreen{
background: paleGreen;
}
.colSalmon{
background: salmon;
}
.col{
width:150px
}
</style>
align self
<style>
.containerFlex{
display: flex;
}
.colKhaki{
background: Khaki;
}
.colGreen{
background: paleGreen;
align-self: ;
}
.colSalmon{
background: salmon;
}
</style>
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: ;
}
.col{
width: 300px
}
</style>
Páginas interesantes
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’).