¿Qué es un Flex Box?

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 44 de 76.

En CSS, el diseño Flexbox es una herramienta potente que ofrece una forma eficiente de alinear y distribuir el espacio entre los elementos de un contenedor. Con Flexbox, puedes controlar la alineación, la dirección, el orden y el tamaño de los elementos dentro de un contenedor, creando diseños flexibles y dinámicos que se adaptan a distintos tamaños de pantalla y dispositivos.

Para usar Flexbox, primero necesitas definir un contenedor flex. Esto se hace estableciendo la propiedad display de un elemento en flex o inline-flex. Una vez que hayas creado un contenedor flex, sus hijos directos se convierten automáticamente en elementos flex.

Esta es la sintaxis básica para crear un contenedor flex:

.container {
    display: flex;
}

display: flex;: Esta declaración convierte el elemento seleccionado en un contenedor flex y a sus hijos directos en elementos flex.

Una vez que tengas un contenedor flex, puedes usar varias propiedades de Flexbox para controlar la disposición de sus elementos flex. Algunas de las propiedades más utilizadas son:

flex-direction: Especifica la dirección de los elementos flex (row, column, row-reverse, column-reverse).
justify-content: Alinea los elementos flex a lo largo del eje principal (p. ej., flex-start, flex-end, center, space-between, space-around).

align-items: Alinea los elementos flexibles a lo largo del eje transversal (por ejemplo, flex-start, flex-end, center, baseline, stretch).
flex-wrap: Controla si los elementos flexibles deben ajustarse en varias líneas (wrap, nowrap, wrap-reverse).
align-content: Alinea las líneas flexibles cuando hay espacio extra en el eje transversal (similar a justify-content, pero para varias líneas).

Desafío

Fácil

Se te proporciona un documento HTML con una división (<div>) que contiene tres divisiones secundarias (<div>). Tu tarea es usar la propiedad display: flex; para convertir la división principal en un contenedor flexible. Sigue los pasos a continuación:

Escribe una regla CSS que seleccione el elemento <div> con la clase container.
Establece la propiedad display del elemento .container en flex.

Pruébalo tú mismo

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>