Caja flexible CSS #1. Crear su primer diseño Flexbox

A finales de 2018 publicamos un libro sobre CSS Grid, la herramienta de maquetación que está revolucionando el diseño web frontend. CSS Grid es completamente nativo de CSS y le permite crear un sistema de diseño basado en cuadrículas, utilizando columnas y filas.

"Explicación de CSS Grid" se convirtió inmediatamente en uno de nuestros libros más vendidos. Así que estamos trabajando en una gran actualización y expansión para ese libro. También estamos comenzando a producir un nuevo libro, "Explicación de Flexbox". Flexbox está estrechamente relacionado con CSS Grid, pero existen diferencias notables:

• Flexbox es un modelo de diseño unidimensional. Puede administrar columnas o filas.
• CSS Grid es un modelo de diseño bidimensional. Puede gestionar tanto columnas como filas.

Durante las próximas semanas, publicaremos una serie de tutoriales de Flexbox mientras escribimos "Explicación de Flexbox". Este primer tutorial demuestra los conceptos básicos de CSS Flexbox con ejemplos prácticos.

Introducción a FlexBox

La especificación CSS Flexbox describe un diseño con elementos ( flex-items ) dentro de un contenedor ( flex-container ). Estos artículos pueden crecer o encogerse en ancho y/o alto, según el espacio disponible en el contenedor. Los artículos se "flexionan" para adaptarse al contenedor principal de la mejor manera posible.

Estos elementos "flexionados" se pueden colocar en cualquier dirección (eje en línea o eje de bloque), lo que brinda mucha flexibilidad al cambiar el tamaño (ancho o alto) de la pantalla o su orientación.

Puede echar un vistazo a la especificación Flexbox W3C haciendo clic en este enlace.

Paso 1. Crear el HTML

Comencemos este ejemplo creando un archivo HTML con un código de muestra. He preparado algo de HTML para ti: es un contenedor con 3 elementos secundarios.

• Abra su editor de código preferido.
• Cree un archivo HTML vacío.
• Visita esta página y copia el código HTML
• Pegue ese código en su archivo HTML.

Paso 2. Crear el CSS

Ahora que tenemos un contenedor con 3 elementos, agreguemos algo de estilo.

• Cree un archivo CSS llamado style.css. . Coloque este archivo en la misma carpeta que su archivo HTML. El enlace a este archivo CSS ya está en la etiqueta de su archivo HTML
• Copie y pegue este código, que también está disponible en Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Esta imagen muestra cómo aparecerá su código cuando abra el archivo HTML en un navegador. Los 3 elementos secundarios son tan anchos como su contenedor principal. La altura está determinada por el contenido de cada elemento. Observe el relleno de 2 rem (alrededor de 32 px en una pantalla de escritorio) en todos los lados.

Paso 3. Los estilos CSS Flexbox

Ahora es el momento de comenzar la parte Flexbox de este tutorial.

• Edite el archivo CSS y agregue este código:

 .container { display: flex; }

Esta imagen muestra cómo se verá su código ahora:

¿Que ha cambiado? Desde el punto de vista técnico, el contenedor principal ahora es un flex-container . Los elementos secundarios se han convertido en elementos flex-items .

¿Por qué ha cambiado el tamaño de los contenedores? Los elementos flexibles no son tan anchos como su contenedor principal. Ahora son tan anchos como el contenido que contienen. Los flex-items aparecen como elementos flotantes a la izquierda. Se comportan como elementos en línea .

Para ver claramente el ancho del contenedor principal, puede aplicar un background-color :

• Edite el código CSS y agregue este código:

 .container { display: flex; background-color: #f5ca3c; }

Así es como aparece ahora el contenedor:

Ya habrá notado que el flex-container se comporta (principalmente) como un elemento a nivel de bloque. Sin embargo, también podemos hacer que el contenedor se comporte como un elemento de nivel en línea. Para hacer esto, cambiamos el valor de la propiedad display a inline-flex .

• Edite el código CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

El contenedor flexible ahora es un elemento de nivel en línea, como puede ver en esta imagen:

Antes de continuar con este tutorial, cambiemos el comportamiento a un elemento a nivel de bloque.

• Edite el código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Etapa 4. Cambiar filas de Flexbox a columnas

Hasta ahora, hemos creado un flex-container . También hemos visto cómo se comportan los elementos secundarios de este contenedor cuando se convierten en flex-items .

Ahora aprendamos cómo cambiar la dirección de nuestro diseño. La dirección predeterminada de un flex-container se basa en filas. Sin embargo, puede cambiar este comportamiento con la propiedad flex-direction .

• Edite el código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Después de actualizar su código, no verá ningún cambio porque flex-direction: row es el valor predeterminado. Hagamos un cambio realmente visible: edite la dirección del flex-container a la column .

• Edite el código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

La siguiente imagen muestra el cambio en su diseño:

Ahora la dirección del flex-container se basa en el eje del bloque (columna). Los flex-items se alinean de arriba a abajo y cada uno de estos elementos ocupa todo el ancho de su contenedor principal. Por lo tanto, se comportan como elementos de bloque.

Ahora, puede comenzar a cuestionar las cosas en este punto: " ¡Oye, mi diseño ahora se ve exactamente igual que el primer diseño en este tutorial! " Eso es verdad. Visualmente, no hay diferencia entre este diseño actual con un flex-container y el primer diseño de este ejemplo con un contenedor de bloques.

Sin embargo, ahora tenemos más control. Por ejemplo, puede invertir la dirección de flex-items con las propiedades inversa row-reverse column-reverse .

• Edite el código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Esta imagen muestra cómo se verá su diseño después de esta nueva actualización:

Para ver los flex-items invertidos en una fila, cambie el valor de la propiedad flex-direction .

• Edite el código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Resumen de la caja flexible

¡Felicidades! Ha aprendido a declarar un flex-container . Ha visto cómo se comportan flex-items según la flex-direction aplicada a su contenedor principal ( row o column ). También sabe cómo invertir el orden de flex-items .

Todos estos cambios se realizan con CSS, por lo que no afectará la estructura del marcado HTML de su sitio. Esa es una de las ventajas de usar Flexbox. Invertir el orden de flex-items es solo una de las características de este módulo CSS. Hay mucho más que aprender sobre Flexbox, así que busque la Parte n.º 2 de este tutorial en unos días.

Más tutoriales de esta serie.

• Caja flexible CSS #2. Cómo usar la propiedad de justificar contenido
• Caja flexible CSS #3. La propiedad de elementos de alineación
• Caja flexible CSS #4. La propiedad de crecimiento flexible