¿Qué es Flex Box?

Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 44 de 76.

En CSS, el diseño de Flexbox es una herramienta potente que proporciona una forma eficaz de align y distribuir el espacio entre items en un container. Con Flexbox, puedes controlar align, direction, el orden y el tamaño de los elementos dentro de un container, creando diseños flexibles y dinámicos que se adaptan a distintos tamaños de pantalla y dispositivos.

Para usar Flexbox, primero debes 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 sus hijos directos en elementos flex.

Una vez que tienes un contenedor flex, puedes usar varias propiedades de Flexbox para controlar el diseño de sus elementos flex. Algunas de las propiedades más utilizadas incluyen:

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 adicional 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 hijas (<div>). Tu tarea es utilizar la propiedad display: flex; para convertir la división principal en un contenedor flex. 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>