¿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 Flexbox es una herramienta poderosa que proporciona una forma eficiente de alinear y distribuir el espacio entre los elementos de un contenedor. Con Flexbox, puedes controlar la alineación, dirección, orden y tamaño de los elementos dentro de un contenedor, creando diseños flexibles y dinámicos que se adaptan a diferentes 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 a flex o inline-flex. Una vez que hayas creado un contenedor flex, sus hijos directos se convierten automáticamente en elementos flex.

Aquí está 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 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 (por ejemplo, flex-start, flex-end, center, space-between, space-around).

align-items: Alinea los elementos flex a lo largo del eje transversal (por ejemplo, flex-start, flex-end, center, baseline, stretch).
flex-wrap: Controla si los elementos flex deben envolverse en múltiples líneas (wrap, nowrap, wrap-reverse).
align-content: Alinea las líneas flex cuando hay espacio adicional en el eje transversal (similar a justify-content pero para múltiples 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 usar la propiedad display: flex; para convertir la división padre en un contenedor flex. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase container.
Establece la propiedad display del elemento .container a flex.

Hoja de referencia

Para crear un contenedor flex, establece la propiedad display en flex:

.container {
    display: flex;
}

Esto convierte al elemento en un contenedor flex y a sus hijos directos en elementos flex.

Propiedades comunes de Flexbox para controlar el diseño:

flex-direction: Dirección de los elementos flex (row, column, row-reverse, column-reverse)
justify-content: Alinea los elementos a lo largo del eje principal (flex-start, flex-end, center, space-between, space-around)
align-items: Alinea los elementos a lo largo del eje transversal (flex-start, flex-end, center, baseline, stretch)
flex-wrap: Controla el ajuste de línea (wrap, nowrap, wrap-reverse)
align-content: Alinea las líneas flex cuando hay espacio adicional en el eje transversal

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>