O que é uma Flex Box?

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 44 de 76.

No CSS, o layout Flexbox é uma ferramenta poderosa que oferece uma maneira eficiente de alinhar e distribuir o espaço entre os itens de um contêiner. Com o Flexbox, você pode controlar o alinhamento, a direção, a ordem e o tamanho dos elementos dentro de um contêiner, criando layouts flexíveis e dinâmicos que se adaptam a diferentes tamanhos de tela e dispositivos.

Para usar Flexbox, primeiro você precisa definir um contêiner flexível. Isso é feito definindo a propriedade display de um elemento como flex ou inline-flex. Depois de criar um contêiner flexível, seus filhos diretos se tornam automaticamente itens flexíveis.

Esta é a sintaxe básica para criar um contêiner flex:

.container {
    display: flex;
}

display: flex;: Essa declaração transforma o elemento selecionado em um contêiner flex e seus filhos diretos em itens flex.
display: inline-flex;: Cria um contêiner flex inline: o elemento se comporta como um elemento inline, mas seus filhos se tornam itens flex com todos os recursos do Flexbox.

Depois de ter um contêiner flexível, você pode usar várias propriedades do Flexbox para controlar o layout dos itens flexíveis. Algumas das propriedades mais usadas incluem:

flex-direction: Especifica a direção dos itens flex (row, column, row-reverse, column-reverse).
justify-content: Alinha os itens flex ao longo do eixo principal (por exemplo, flex-start, flex-end, center, space-between, space-around).

align-items: Alinha os itens flexíveis ao longo do eixo transversal (por exemplo, flex-start, flex-end, center, baseline, stretch).
flex-wrap: Controla se os itens flexíveis devem quebrar em várias linhas (wrap, nowrap, wrap-reverse).
align-content: Alinha as linhas flexíveis quando há espaço extra no eixo transversal (semelhante a justify-content, mas para várias linhas).

Desafio

Fácil

Você recebeu um documento HTML com uma divisão (<div>) que contém três divisões filhas (<div>). Sua tarefa é usar a propriedade display: flex; para transformar a divisão pai em um contêiner flexível. Siga as etapas abaixo:

Escreva uma regra CSS que selecione o elemento <div> com a classe container.
Defina a propriedade display do elemento .container como flex.

Experimente você mesmo

<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>