Tendencias:
portada-flexbox

CSS Master: Aprende a crear diseños responsive con el modelo Flexbox

21/12/2022
Número de visualizaciones

A la hora de organizar los elementos de una página web, existen varias formas de hacerlo, desde códigos específicos, APIs o librerías hasta módulos como Flexbox.

Para hacer un sitio web responsive, los elementos deben modificar su comportamiento, como el ancho, la altura, la resolución, la orientación, etc., según el tipo de dispositivo desde el que se visualice.

A continuación, descubrirás qué es flexbox, cuáles son sus fundamentos y cómo utilizarlo para crear webs adaptables.

¿Qué es Flexbox?

CSS Flexbox es un modelo de diseño que permite una disposición eficiente y dinámica de los elementos.

Este diseño es unidimensional y permite la colocación de elementos dentro de un contenedor con el espacio igualmente distribuido.

Esto hace que los elementos respondan, es decir, que los elementos cambien su comportamiento según el tipo de dispositivo utilizado.

Por tanto, hace que los elementos sean flexibles y les proporciona la posición y la simetría adecuadas.

Flexbox se introdujo en la versión CSS3 para organizar elementos en un contenedor de manera más eficiente y dinámica.

Antes de flexbox, había inicialmente cuatro métodos de diseño que eran los siguientes:

  1. Block: Para crear secciones en una página web, se utiliza el diseño de bloque.
  2. Inline: Es un método de diseño que se utiliza para el texto.
  3. Table: Se utiliza para una tabla con datos bidimensionales.
  4. Positioned: Esto se utiliza para una posición definida de un elemento.

A continuación, hablaremos sobre los diferentes componentes utilizados en Flexbox.

Componentes Flexbox

Un flexbox consta de dos componentes principales:

Flex-container

Este componente define las propiedades del elemento antecesor configurando su visualización en flex o inline-flex.

Flex-items

Describe las propiedades de los elementos sucesores, además, puede haber numerosos elementos presentes dentro de un flex-container.

Una representación visual de un flexbox podría ser la siguiente:

representación flexbox

Flexbox Axis

Cuando se trata del diseño de flexbox, hay dos ejes que deben tenerse en cuenta. Estos ejes se enumeran a continuación.

  • Main axis (Eje principal)
  • Cross axis (Eje transversal)

A continuación, explicaré la función de ambos ejes:

Main axis (Eje principal)

El main axis (de izquierda a derecha) se establece mediante la propiedad flex-direction. Este eje puede representar cuatro valores que son: row, row-reverse, column y column-reverse.

En el caso de los dos primeros valores, que son row y row-reverse (fila y fila inversa), el flexbox muestra una dirección en línea, lo que significa que el contenedor flexible y los elementos se alinearán horizontalmente.

Por otro lado, para los valores column y column-reverse (columna y columna inversa) , la dirección del flexbox será block, o en palabras más simples, el contenedor y los elementos se organizarán verticalmente.

main axis

Cross axis (Eje transversal)

La dirección de este eje es perpendicular al eje principal (main axis). Si la dirección del eje principal se ajusta a row o row-reverse, el eje transversal (cross axis) se moverá a lo largo de las columnas hacia abajo, mientras que, en el caso de column y column-reverse, el eje se moverá a lo largo de las filas.

cross axis

Ambos ejes tienen un punto inicial, uno final y una cierta longitud entre estos puntos.

Propiedades Flexbox

Las principales propiedades de un flexbox y que hacen que la distribución de los elementos se pueda controlar son las siguientes:

1. display

Muestra un elemento como un flexbox.

2. flex-direction

Esta propiedad define la dirección de los elementos en un contenedor flexible (flex-container).

flex-direction

3. justify-content

Si los elementos en un flexbox no ocupan el espacio horizontal por completo, entonces esta propiedad los alinea a lo largo del eje principal.

justify-content

4. align-items

Si los elementos en un flexbox no ocupan el espacio vertical por completo, esta propiedad los alinea a lo largo del eje transversal.

align-items

5. flex-wrap

Si no hay mucho espacio en una sola línea flexible, esta propiedad decide si se envuelven los elementos o no.

flex-wrap

6. align-content

Altera el comportamiento de la propiedad flex-wrap y es bastante similar a la propiedad align-items con la única diferencia de que alinea las líneas flexibles en lugar de los elementos flexibles.

align-content

7. flex-flow

Una propiedad abreviada para flex-direction y flex-wrap.

8. order

Define el orden de un elemento flex relativo a otros elementos presentes en un flexbox.

order

9. align-self

Esta propiedad anula la propiedad align-items y se usa en elementos flexibles.

align-self

10. flex

Esta propiedad anula la propiedad align-items y se usa en elementos flexibles.

Ejemplo de uso de Flexbox

A continuación, muestro un ejemplo sencillo de cómo crear un flexbox.

HTML

flexbox html

En este código, se crea un contenedor div que tiene la clase "flexbox" y se anidan cuatro contenedores div más dentro de él.

CSS

flexbox css

En primer lugar, se asigna al contenedor div principal un display flexible para convertirlo en un cuadro flexible, y luego le damos un color de fondo.

flexbox css 2

Por último, configuramos los elementos flexibles presentes en el flexbox utilizando varias propiedades CSS.

Y el resultado sería el siguiente:

salida flexbox

Organiza los elementos de un sitio web como un profesional

Está claro que el modelo Flexbox es realmente útil para distribuir los contenedores y elementos de un sitio web y hacer que nuestro sitio web sea responsive.

Si quieres descubrir las diferentes formas de incluir código css en html, te aconsejo que veas este artículo que redacté al respecto. Y si quieres formarte, no te pierdas este Máster en Diseño Gráfico y Multimedia.

Y si te ha gustado el artículo y quieres descubrir otros escritos por mí, puedes entrar a mi perfil.

Categorizado en: Diseño y Arquitectura

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Descubre MasterClass de INESEM. Una plataforma en la que profesionales enseñan en abierto

Profesionales enseñando en abierto

Universidades colaboradoras
La universidad Antonio de Nebrija es Universidad colaboradora con INESEM Business School La universidad a Distancia de Madrid es Universidad colaboradora con INESEM Business School