Guia de CSS Flexbox

CSS Flexbox en un modelo de layout que funciona con respecto al eje X y Y (filas y columnas)., para el cual requerimos un contenedor o container padre y los elementos o items hijos que conforma todo el modelo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex container</title>
    <style>
        .container{
            display: flex;
            background-color: DodgerBlue;
        }
        .container > div {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

El contenedor padre tiene la propiedad display: flex;

.container{
    display: flex;
}

CSS Flexbox propiedades

flex-direction row (default) | row-reverse | column | column-reverse
flex-wrap nowrap (default) | wrap | wrap-reverse
flex-flow flex-direction y flex-wrap
justify-content flex-start (default) | center | flex-end | space-between | space-around | space-evenly
align-items flex-start (default) | center | flex-end | stretch | baseline
align-content flex-start (default) | center | flex-end | stretch | space-between | space-around | space-evenly

flex-direction

Define en qué dirección (filas o columnas) se distribuirán los elementos dentro del contenedor.

.container {
  display: flex;
  flex-direction: row | row-reverse  | column | column-reverse;
}

flex-direction: row;

Acomoda los elementos horizontalmente de izquierda a derecha esta establecida por defecto

.container{
    display: flex;
    flex-direction: row;
}

flex-direction: row-reverse;

Acomoda los elementos horizontalmente de derecha a izquierda

.container{
    display: flex;
    flex-direction: row-reverse;
}

flex-direction: column;

Acomoda los elementos verticalmente de arriba a abajo

.container{
    display: flex;
    flex-direction: column;
}

flex-direction: column-reverse;

Acomoda los elementos verticalmente de abajo hacia arriba

.container{
    display: flex;
    flex-direction: column-reverse;
}

flex-wrap

Esta propiedad determina si los elementos se deben de ajustar o no al contenedor, es decir si saltan a la siguiente fila o columna.

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap: nowrap;

Establece que los elementos no se distribuirán y se ajustaran en el contenedor este valor esta establecido por defecto (se acomodan como pueden).

.container {
  display: flex;
  flex-wrap: nowrap;
}

flex-wrap: wrap;

Los elementos se acomodaran en el contenedor., si los elementos supera el tamaño del este saltan a la siguiente fila o columna.

.container {
  display: flex;
  flex-wrap: wrap;
}

flex-wrap: wrap-reverse;

Los elementos se acomodaran en orden inverso en el espacio del contenedor, si los elementos supera el tamaño del contenedor saltan a la siguiente fila o columna.

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-flow

Es una combinación de las propiedades flex-direction y flex-wrap con sus valores flex-flow: flex-direction flex-wrap;

.container {
  display: flex;
  /*
  flex-direction: row (default) | row-reverse  | column | column-reverse
  flex-wrap: nowrap (default) | wrap | wrap-reverse
  */
  flex-flow: row wrap;
}

justify-content

Se usa para alinear el contenido

.container {
  display: flex;
  justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
}

justify-content: flex-start;

Aline a los elementos al inicio y a la izquierda del contenedor (por defecto)

.container {
  display: flex;
  justify-content: flex-start;
}

justify-content: center;

Aline a los elementos al centro horizontalmente del contenedor

.container {
  display: flex;
  justify-content: center;
}

justify-content: flex-end;

Aline a los elementos al final y a la derecha del contenedor

.container {
  display: flex;
  justify-content: flex-end;
}

justify-content: space-between;

Organiza los elementos con espaciado y acomoda el primer elemento y el ultimo a las esquinas

.container {
  display: flex;
  justify-content: space-between;
}

justify-content: space-around;

Agrega un espaciado antes, después y entre cada elemento

.container {
  display: flex;
  justify-content: space-around;
}

justify-content: space-evenly;

Agrega un espacio del mismo tamaño antes, entre y después de cada elemento

.container {
  display: flex;
  justify-content: space-evenly;
}

align-items

Se usa para alinear de manera vertical los elementos del contenedor

.container {
  display: flex;
  align-items: flex-start | center | flex-end | stretch | baseline;
}

align-items: flex-start;

Alinea los elementos arriba de todo y al inicio este valor esta definido por defecto

.container {
  display: flex;
  align-items: flex-start;
}

align-items: center;

Centra los elementos verticalmente

.container {
  display: flex;
  align-items: center;
}

align-items: flex-end;

Alinea los elementos al final y abajo

.container {
  display: flex;
  align-items: flex-end;
}

align-items: stretch;

No lo alinea hace que ocupe todo el alto que pueda del contenedor

.container {
  display: flex;
  align-items: stretch;
}

align-items: baseline;

Alinea al los elementos con respecto al contenido

.container {
  display: flex;
  align-items: baseline;
}

align-content

Se usa para alinear las filas

.container {
  display: flex;
  align-content: flex-start | center | flex-end | stretch | space-between | space-around | space-evenly;
  
}

Para los siguientes ejemplos use un height: 350px; y flex-wrap: wrap; , para demostrar mejor la propiedad align-content.

align-content: flex-start;

Alinea la filas arriba, esta propiedad esta por defecto.

.container {
  display: flex;
  align-content: flex-start;
}

align-content: center;

Centra verticalmente las filas

.container {
  display: flex;
  align-content: center;
}

align-content: flex-end;

Alinea las filas abajo

.container {
  display: flex;
  align-content: flex-end;
}

align-content: stretch;

Todas las filas intentan ocupar todo el contenido, se distribuyen el alto de manera que ocupan todo el contenedor

.container {
  display: flex;
  align-content: stretch;
}

align-content: space-between;

Deja un espacio entre cada fila ajustando a todo lo alto del contenedor

.container {
  display: flex;
  align-content: space-between;
}

align-content: space-around;

Es parecido al space-between con la diferencia que deja un espacio al inicio y al final de las filas

.container {
  display: flex;
  align-content: space-around;
}

align-content: space-evenly;

Deja el mismo tamaño de espacio entre cada fila, al inicio y al final.

.container {
  display: flex;
  align-content: space-evenly;
}

Centrado perfecto

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centrado perfecto</title>
    <style>
      .container  {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: DodgerBlue;
      }
      .container > div {
        width: 70px;
        height: 70px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div></div>
    </div>
  </body>
</html>

Aquí tanto la propiedad justify-content y align-items tendrán el valor de center, logrando centrar perfectamente el elemento., le agregue el alto de navegador con height: 100vh;

Propiedades items (elementos)

Los elementos hijos tienen las siguientes propiedades:

order
flex-grow
flex-shrink
flex-basis
flex flex-grow flex-shrink flex-basis
align-self auto(default) | flex-start | flex-end | center | baseline | stretch

order

Esta propiedad especifica el orden de los elementos, por defecto es 0 cero

.item {
  order: [numero]; 
}

El elemento uno tendrá un order = 3, dos = 2, tres = 4 y cuatro = 1

flex-grow

Especifica cuánto crecerá un elemento en relación con el resto de los elementos, por defecto es 0 cero

.item {
  flex-grow: [numero]; 
}

El elemento uno y dos tendrá un flex-grow = 1, y el tres flex-grow = 8

flex-shrink

Especifica cuánto se reducirá un elemento en relación con el resto de los elementos

.item {
  flex-shrink: [numero]; 
}

No permitirá que el tercer elemento se encoja tanto como los otros elementos ya que se le asigno flex-shrink= 0

flex-basis

Especifica la longitud inicial de un elemento

.item {
  flex-basis: [numero]; 
}

El elemento tres tendrá flex-basis= 200px;

flex

Es una propiedad abreviada (shorthand) de las propiedades flex-grow, flex-shrink y flex-basis

.item {
  flex: flex-grow flex-shrink flex-basis; 
}

El elemento tres tendrá los valores de flex-grow = 0, flex-shrink = 0 y flex-basis = 200px

align-self

Especifica la alineación del elemento seleccionado dentro del contenedor. La propiedad align-self anula la alineación predeterminada establecida por la propiedad align-items del contenedor.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch; 
}

El elemento:

Uno tendrá el valor de flex-start
Dos flex-end
Tres center
Cuatro baseline
Y cinco stretch