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:
- Block: Para crear secciones en una página web, se utiliza el diseño de bloque.
- Inline: Es un método de diseño que se utiliza para el texto.
- Table: Se utiliza para una tabla con datos bidimensionales.
- 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:
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.
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.
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).
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.
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.
5. flex-wrap
Si no hay mucho espacio en una sola línea flexible, esta propiedad decide si se envuelven los elementos o no.
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.
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.
9. align-self
Esta propiedad anula la propiedad align-items y se usa en elementos flexibles.
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
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
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.
Por último, configuramos los elementos flexibles presentes en el flexbox utilizando varias propiedades CSS.
Y el resultado sería el siguiente:
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.
