Flexbox CSS

Si has llegado hasta aquí leyendo nuestras guías de lenguaje HTML, seguramente recordarás que algunos elementos de los que hemos hablado tienen un comportamiento de bloqueo: como ya se explicó, esto significa que los navegadores agregan automáticamente una línea en blanco antes y después de cada elemento del género, tal que el efecto resultante es "pasar de párrafo".

Sin embargo, también hay elementos inline gracias a los cuales puede colocar un elemento junto a otro, sin pasar por el límite del comportamiento de bloqueo.

Podemos asignar dimensiones personalizadas a los elementos de bloqueo, tal como los definiremos. Ocuparán por tanto todo el espacio que necesiten en vertical y toda la línea en horizontal.
Los elementos inline, por otro lado, solo ocuparán tanto espacio como requiera su contenido.

Sin embargo, existe una propiedad CSS que le permite cambiar estos comportamientos predeterminados.
Estamos hablando de la propiedad "display".

La propriedad display

La propiedad display nos permite controlar cómo nuestro navegador representa el elemento en términos de espacio. Es una propiedad que tienen todos los elementos html, y acepta los siguientes valores (que trataremos de explicar de la forma más sencilla posible):

• block:  hace que nuestro elemento ocupe todo el espacio de la página en horizontal y por tanto, como decíamos al hablar de algunos elementos, hace que se “envuelva”. Sin embargo, verticalmente, el elemento solo ocupará el espacio del elemento. Este es el valor predeterminado de varios elementos html, como las etiquetas <div> y <p>, así como varias etiquetas <h>.

¡Consejos útiles!
Si establece una width para su contenido dando en los márgenes del eje x valor "auto", obtendrás que el contenido está perfectamente centrado. Esto solo sucede si el valor de la propiedad "display" es "block".

• inline: es el valor predeterminado de elementos como <span>, <b>, <strong> o <em>. Cuando el valor de la propiedad "display" es "inline" el elemento ocupará única y exclusivamente el espacio del contenido, tanto en vertical como en horizontal: incluso intentando establecer un valor diferente de ancho o alto, nada cambiará. La única propiedad sobre la que acepta cambios es el margen horizontal.
• inline-block: permite que el elemento ocupe el espacio que establezcamos que debe ocupar, en función del contenido, los valores de ancho y alto que le demos. Por lo tanto, será posible colocar dos elementos uno al lado del otro.
• none: hace que el contenido sea invisible y no hace que ocupe espacio
• flex: el valor más importante de la propiedad display en CSS, gracias al cual el elemento en cuestión podrá disfrutar de las ventajas de el FLEXBOX.

El Flexbox

El flexbox, o caja flexible, es un modelo que te permite crear maquetaciones, incluso complejas, de forma limpia, rápida y receptiva.
¿Qué significa responsive?

¿Recuerdas cuando hablamos de la viewport? Lo definimos como el tamaño visible de nuestra página web, que cambia a medida que cambia el dispositivo utilizado para usar el sitio.

Un sitio web, de hecho, se puede navegar desde diferentes dispositivos: desde PC, desde tabletas y desde teléfonos móviles.
Cuando consultamos un sitio web usando una computadora, hablamos de navegación "de escritorio"; si por el contrario utilizamos un teléfono móvil para hacerlo, hablaremos de navegación “móvil”.

Entiende que, al analizar todos estos dispositivos, lo primero que notaremos será que el tamaño de su pantalla difiere significativamente entre sí. Esto obviamente implica una disposición diferente de los elementos de su sitio web.
¿Adivinas a dónde queremos ir? ¡Exactamente!
Deberás crear diferentes diseños según la pantalla del dispositivo desde el que se visitará tu sitio web.

Hoy en día, el mayor tráfico en los sitios web proviene de los teléfonos móviles: intenta pensar también en su experiencia personal y te darás cuenta de la frecuencia con la que consultas un sitio web usando tu teléfono y la frecuencia con la que usas tu ordenador
Esto sucede porque el teléfono móvil está siempre a mano, incluso cuando estamos fuera de casa, y ciertamente lo usamos en mayor medida.

Te hemos hecho reflexionar sobre esto no por casualidad: es esencial, de hecho, que cuando diseñes el diseño de tu sitio web, lo concibas como “mobile-first”. Esto quiere decir que tu sitio debe ser, en primer lugar, impecablemente usable desde el móvil y, poco a poco, también adaptarás el diseño al tamaño de las pantallas más grandes.

Cuando un sitio es perfectamente utilizable desde cualquier pantalla, y por tanto también desde el móvil, se define como "responsive", característica esencial de un sitio web respetable.
Es posible cumplir con estos criterios gracias a la ayuda de flexbox. Veamos cómo.

Para usar el flexbox, debe crear una clase .flex-container en su hoja CSS y darle la propiedad "display: flex".

Imagine tener, en el html, un <div> al que asigna la clase .flex-container recién creada: a partir de este momento, todos los elementos secundarios de esta clase se volverán a su vez flexibles y podrán explotar el potencial de la caja flexible.

El flexbox, por tanto, crea una especie de contenedor en el que, automáticamente, los elementos se dispondrán uno al lado del otro, y se comprimirán si son muchos.

Sin embargo, existen propiedades que nos permiten disponer estos elementos de la forma que más nos guste:

• flex-wrap: acepta como valores “wrap” y “nowrap”.
  “wrap” nos permite no comprimir los elementos en el flexbox y envolver una vez agotado el espacio útil;
  “nowrap” es el valor por defecto, que por otro lado comprime los elementos si no hay el espacio necesario. Cuando los elementos son realmente demasiados, y ni siquiera entran comprimiendo, el flexbox se rompe y los elementos se desbordan de la página, dando vida a un efecto de desplazamiento horizontal.
   
• flex-direction: nos permite definir la dirección en la que ordenar los elementos. Acepta 4 valores:

1. row: "Línea", (es la predeterminada); organiza los elementos de izquierda a derecha horizontalmente, en orden ascendente desde el primer hijo hasta el último
2. row-reverse: al igual que el anterior, siempre dispone los elementos de forma horizontal pero, esta vez, de derecha a izquierda
3. column: organiza los elementos verticalmente, de arriba a abajo, en orden ascendente, desde el primer hijo hasta el último
4. column-reverse: organiza los elementos verticalmente, pero de abajo hacia arriba

• Justify-content: alinea los elementos horizontalmente dentro del contenedor flexible de diferentes maneras dependiendo del valor dado. Los valores que acepta son:

1. center: para alinear el elemento al centro
2. flex-start: el valor de default, justifica los elemento de la izquierda
3. flex-end: justifica los elemento de la derecha
4. space-between: organiza el primer elemento en el extremo izquierdo y el último elemento en el extremo derecho (en los bordes) y luego los espacia por igual
5. space-around: ordena los elementos dándoles el mismo espacio a la izquierda ya la derecha (incluso a los dos elementos extremos que, por tanto, no se encontrarán en los bordes); este espacio entre un elemento y otro no se superpone, sino que suma
6. space-evenly: organiza los elementos espaciados equitativamente entre ellos

• Align-items: alinea los elementos verticalmente dentro del contenedor flexible de acuerdo con el valor dado; acepta los siguientes valores:

1. center: alinear los elementos en el centro verticalmente dentro de mi contenedor flexible. Puede decidir darle a este último una "altura: 100vh", para centrar los elementos perfectamente en el centro de la página (porque el propio contenedor flexible se habrá vuelto tan grande como la página; de hecho, el contenedor flexible se extiende horizontal y verticalmente solo por el tamaño de su contenido)
2. flex-start: el valor predeterminado, alinea los elementos en la parte superior
3. flex-end: obviamente, alineará los elementos en la parte inferior

P.D. Cuando usamos flex-direction: column en lugar de flex-direction: row, las propiedades align-items y justify-content se invierten: align-items administrará el espacio horizontalmente y justificará el contenido vertical.