Elementos Flex CSS

Como vimos anteriormente, los contenedores flex tienen propiedades para establecer su visualización y el de sus elementos flex, ahora aprenderemos a establecer los propiedades propias para los elementos flex.

Para fines de visualización se establecen las siguientes propiedades CSS para el contenedor y sus elementos:

CSS:

.contenedor-flex {
  display: flex;
  background-color: #f1f1f1;
}
.contenedor-flex > div {
  background-color: DodgeBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

HTML:

<div clss="contenedor-flexx">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Muestra:

1
2
3

Las propiedades para los elementos Flex son:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

La propiedad order

La propiedad order establece el orden en que los elementos se mostrarán.

El primer elemento flex en el código no tiene que aparecer como el primer elemento en el diseño (o visualización en pantalla).

El valor order debe ser un número, el valor por defecto es 0.

HTML:

<div class="contenedor-flex">
  <div style="order: 3;">1</div>
  <div style="order: 2;">2</div>
  <div style="order: 4;">3</div>
  <div style="order: 1;">4</div>
</div> 

Muestra:

1
2
3
4

La propiedad flex-grow

La propiedad flex-grow especifica que tanto un elemento flex aumentará con relación al resto de los elementos.

El valor debe ser un número, el valor por defecto es 0.

En siguiente ejemplo hace que el tercer elemento aumente ocho veces más que los otros elementos flex:

HTML:

<div class="contenedor-flex">
  <div style="flex-grow: 1;">1</div>
  <div style="flex-grow: 1;">2</div>
  <div style="flex-grow: 8;">3</div>
</div>

Muestra:

1
2
3

La propiedad flex-shrink

La propiedad flex-shrink establece que tanto un elemento flex encojerá con relación al resto de los elementos.

El valor debe ser un número, el valor por defecto es 1.

En el siguiente ejemplo, no se permite que el tercer elemento se encoja tanto como los otros elementos flex:

HTML:

<div class="contenedor-flex">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0;">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

Muestra:

1
2
3
4
5
6
7

La propiedad flex-basis

La propiedad flex-basis especifica la longitud de un elemento flex.

En el siguiente ejemplo, es establece la longitud inicial del tercer elemento flex en 200 pixeles:

HTML:

<div class="contenedor-flex">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px;">3</div>
  <div>4</div>
</div>

Muestra:

1
2
3
4

La propiedad flex

La propiedad flex es una propiedad abreviada para las propiedades flex-grow, flex-shrink  y flex-basis.

En el siguiente ejemplo, hace que el tercer elemento no aumente, no encoja y con una longitud inicial de 200 pixeles:

HTML:

<div class="contenedor-flex">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px;">3</div>
  <div>4</div>
</div>

Muestra:

1
2
3
4

La propiedad align-self

La propiedad align-self especifica la alinieación del elemento seleccionado dentro del contenedor flex.

La propiedad align-self anula la alineación establecida por el contenedor con la propiedad align-items.

En el siguiente ejemplo, se establece la altura del contenedor en 200 pixeles y se establece la alineación al tercer elemento flex en medio del contenedor:

HTML:

<div class="contenedor-flex">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center;">3</div>
  <div>4</div>
</div>

Muestra:

1
2
3
4

En el siguiente ejemplo, se establece la alineación del segundo elemento en lo alto del contenedor y la alineación del tercer elemento en lo bajo del contenedor:

HTML:

<div class="contenedor-flex">
  <div>1</div>
  <div style="align-self: flex-start;">2</div>
 <div style="align-self: flex-end;">3</div>
 <div>4</div>
</div>

Muestra:

1
2
3
4