¿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 proporciona una forma eficiente de alinear y distribuir el espacio entre los elementos de un container. Con Flexbox, puedes controlar la alineación, la dirección, 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 flexibles.

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 flexibles. Algunas de las propiedades más utilizadas incluyen:

flex-direction: Especifica la dirección de los elementos flexibles (row, column, row-reverse, column-reverse).
justify-content: Alinea los elementos flexibles a lo largo del eje principal (por ejemplo, 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 a 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 secundarias (<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>