# Flexbox

O Flexbox é um modelo de layout que permite organizar os elementos espacialmente dentro da sua interface. Nesse artigo vamos descrever suas principais propriedades, para mais informação  recomendamos esse [guia](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Antes de entrarmos nas propriedades precisamos definir um elemento como fl*ex,* isso significa que todos os elementos dentro dele (que vamos chamar de *contêiner* ) irão seguir as propriedades do contêiner. Abaixo mostramos como definir um elemento como *flex*.

```css
.container {
  display: flex; 
}
```

### **f**lex-direction

Essa propriedade irá definir a direção em que os itens serão posicionados. Os valores da propriedades podem ser:

{% tabs %}
{% tab title="row" %}
Os itens serão posicionados da esquerda para a direita (opção padrão).

![](https://lh4.googleusercontent.com/s5mB6TUzX0okFrn-le5hcuyakMODWcXJh24F0brSHEcGrcnVnILkN_ZoPhut3hnNSSEbHIe7u8s0zr5qZq_A6R7xWj1HKkYflPcvLS5KKoe_3izFRog2ezj9cF5hnQoqsGrmcD6VoRQ)
{% endtab %}

{% tab title="row-reverse" %}
Os itens serão posicionados da direita para a esquerda.

![](https://lh6.googleusercontent.com/XY-ZU7I40MXa1Od0WjtnkAHy6u9dTcUu8WdhQPrDAC9JxN420ZI5l0KC-wDMe7fJ0Rh62kBxlKb3f08GBzEe9fYeJr4defQvj6Mdk4LpbnW7WlhcqODcBXMPmU_ziCaO4QAoWFJknyk)
{% endtab %}

{% tab title="column" %}
Os itens serão posicionados de cima para baixo.

![](https://lh3.googleusercontent.com/EDlcP2p7oa7pEjJSXRgKSlEOS15rvPy02m7723qNOeCbuugm6NELLbbZ4TjaQcrGTgyvdyKscubq-Btb4neFOXFjtbw-j2UX2_mQ7SMcR3vScckoNdKFalfN7eKw--GwV329d-yMnJc)
{% endtab %}

{% tab title="column-reverse" %}
Os itens serão posicionados de baixo para cima.

![](https://lh3.googleusercontent.com/vYA7uu7dlNBdQP-t-M0zeuNkZSGk6gRYazloo3ho2FpIZhm3JqJsXXkwqqKipp8NMwr1NeWrP1xcoXaRmWX8tPwhndRaFxloUGy9miskRf_xjvBrMCh8JZ4yKxVb0fxxKRnP1Dg5vJI)

<br>
{% endtab %}
{% endtabs %}

### **justify-content**

Essa propriedade irá definir o alinhamento dos itens. Os valores da propriedades podem ser:

{% tabs %}
{% tab title="flex-start" %}
Os itens serão alinhados no começo da linha (opção padrão).

![](https://lh6.googleusercontent.com/K-JZv2TUqdhtm4JFdKb_ga4fqEI5k_KigZelhOXG01nbeQkzPiTnR9BkTE6p7vgOuUHvdDbqWXu6Z_0-U7Q7pMVNAk6xmaGfwb7k6zq5g3DlJvKJIsy3pSlsV88a96f7xzPL4ICijHg)
{% endtab %}

{% tab title="flex-end" %}
Os itens serão alinhados no fim da linha.&#x20;

![](https://lh6.googleusercontent.com/Bpt2pFCa1u2wahZtRArPaz_v2qb-d5c42h1-SCA-eHrGHJg-1GnOUhtkIPKIC3zU-RU8n1kbCmUhaVj2GBuVhp3j6ALIGTUjiwxB0ED06watsbNZb3IHZznOHPLP_ke2aX6PNHjUXoQ)
{% endtab %}

{% tab title="center" %}
Os itens serão alinhados centrados na linha.

![](https://lh6.googleusercontent.com/SEOtqwWXCen6qOE8PIipj0Kugoi3iNhaSkCOspDSWsAMWvHM-t1Y7kzefE-n_sZquddjp7O7nivcnNTTDMrT2Y-S1cKl_3Lscg2lD1hgEA0A_V84iNMRhyrTX_yovaSeGST6htFFRPY)
{% endtab %}

{% tab title="space-between" %}
Os itens serão alinhados de modo que fiquem divididos igualmente na linha.

![](https://lh3.googleusercontent.com/TXEXpPbwQm8duISjkXs3O77iRRkajQ7HGUdy2HgvXVFGvE-X_FnfyZele_UAyaugf-U-Ga_5lsv6fhQRe1dDf_7XgKV1_LYPQwYd9Efx-I8twYUE27wID5Ti_HuhBE7-rdUFYj7LlFI)
{% endtab %}

{% tab title="space-around" %}
Os itens serão alinhados de modo que fiquem divididos na linha com espaços iguais entre eles.

![](https://lh3.googleusercontent.com/INYy0wt_lWQD-uymKWUqBy3ADgJTw_sQIeOn3KAXjniicMaoshtExNBhbQ1K3JsvmHrct5cDQ1KK_0FL7yT0NOnac9-Zbfdv3PORnA1GqFGmvMixkt-bRZzika-82k8CinIzat5cH5U)

{% endtab %}

{% tab title="space-evenly" %}
Os itens serão alinhados de modo que fiquem divididos de modo que dois itens sempre tenham o mesmo espaço entre eles.

![](https://lh3.googleusercontent.com/INYy0wt_lWQD-uymKWUqBy3ADgJTw_sQIeOn3KAXjniicMaoshtExNBhbQ1K3JsvmHrct5cDQ1KK_0FL7yT0NOnac9-Zbfdv3PORnA1GqFGmvMixkt-bRZzika-82k8CinIzat5cH5U)
{% endtab %}
{% endtabs %}

### **flex-wrap**

Por padrão todos elementos alinhados em uma linha, é possível modificar isso com a propriedade flex-wrap. Os valores da propridade podem ser:

{% tabs %}
{% tab title="nowrap" %}
Todos os itens serão alinhados em uma linha (opção padrão).

![](https://lh5.googleusercontent.com/UwtPNOoYYzjZFZx2sYKfz-KAfGJYVXRPXXKfqOt9z8H4FgfhJIv5vELIwONi5rY-377cwzGCjsDH-omwzFb5kXAfHDzkzh8WJET1rBspRHRAU64PJstbpslWNRU7brjzxIQJ5jOYyno)
{% endtab %}

{% tab title="wrap" %}
Os itens irão para a próxima linha conforme necessário.

![](https://lh5.googleusercontent.com/VnmxxfKCFRw_XtYWFYsFyJir9543C6-wwO52W20pmmf76JC65xz0J6v8y7GXH0EtDBPwL56yZllf2Srp0yUqLngi_3gUnIqsjIIl1WerrDU-zffgTJ1onNS_e3AVvsrAt4rWHBbGe94)
{% endtab %}

{% tab title="wrap-reverse" %}
Os itens irão para a próxima linha conforme necessário, porém do fim para o início.

![](https://lh6.googleusercontent.com/ngfyh27RSbQSp_2mJWUdg7ottUxohXzRETiNyKKuUZslWIY7dhWrA-7x13Q8iHE41lK-ie4r6Eahdk5WXRX5wYs8ySBWJel_bLS3FpWr2YOcjX8JbtrDVu1pueGzW2lrdbblUe509bw)
{% endtab %}
{% endtabs %}

### **align-content**

Organiza a distribuição dos itens no eixo y.

{% tabs %}
{% tab title="stretch" %}
Distribui os itens de modo que ocupem todo o espaço disponível do eixo y. (opção padrão).

![](https://lh5.googleusercontent.com/b7DV6ndyZbwLHUP0WDBcKPY2ZYnYfTp0TGd4EMyxDuKnJrv7IIM8wWEaBHSZJS-VjNduypbjV7TF3aNueVCfx2Nd0c43WHT3EF5D64DDsMfeGP14tCJmxBiLXyMd9mjkITDRtxLFo0A)

<br>
{% endtab %}

{% tab title="space-around" %}
Os itens são distribuídos igualmente e o espaço entre eles são iguais no eixo y.

![](https://lh3.googleusercontent.com/D-Pkisp2UHv10EvCk33Vl7qWbaptN6SjKIjAV8ee3VCOMcDDUqRmrEg7zERXKniSsysxGVJ2r4A-rp0CtE4aZc9POCt_Kqb58-wRUEpFY5Ytcr91aNd-qvqsJvkuQWRjVdO-y5MyO6o)

<br>
{% endtab %}

{% tab title="space-between" %}
Os itens são distribuídos igualmente no eixo y.

![](https://lh3.googleusercontent.com/xLnuOFQseN_hWNdTcoVl99Ttuak-Cxn2HVtquyvwAMYzPZWGi7wjseFrUgR2yQJyrBmFOP085zUwisQS1U0mQ-1qU8M0WvHWVVrYwQl7TEuBYjxRZMegXLac-EAL5SXJHurM_hH4Kc0)
{% endtab %}

{% tab title="center" %}
Os itens são posicionados no centro do eixo y.

![](https://lh5.googleusercontent.com/flkx0jNgZhKZw33XZ5R19ZD5liplimd_g9igKXGajbkeZgq-zbuGj71GrytUjgzsUzsmoNCGuFB87D-pyMi_LSibo4fRjXy0gORuw_yLt9eVaHGVxZa7T4o3Ti1SIfLuozcm8aAewYs)

<br>
{% endtab %}

{% tab title="flex-start" %}
Os itens são posicionados a partir do começo no eixo y.

![](https://lh3.googleusercontent.com/I6jFzLwImOLifigfH8k0brWZqDVW1pqWMMKPjl6AaeDtuvJEOslhLzoISWBv0N4JKkD4BIa7keavBbHI0HIS1u6sUtYNO-HPtL9qKyfscEma7omxvfgO3lqAGVjQuwZLa-ZhLEPxV-c)
{% endtab %}

{% tab title="flex-end" %}
Os itens são posicionados a partir do fim no eixo y.

![](https://lh6.googleusercontent.com/6jjEmw2b07p47yABQh-TStsJb7CQ9fh0RNoGrk0NhtkbdBQnGRJ4uE9NkPfDs78qiaWnW5s5v2f1ONJQawfz88CpKAntjEbOv6z-f2rQ5KgJaCUowkzkvvh8o7fs34rNXsC22bxbmjo)
{% endtab %}
{% endtabs %}

Abaixo temos um exemplo completo de como essas propriedades podem ser usadas. Na primeira aba temos o código em HTML, na segunda o CSS e por último a página resultante.&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Flexbox</title>
</head>
<body>
    <div id="Exe1">
        <p>Caixa 1</p>
        <p>Caixa 2</p>
        <p>Caixa 3</p>
    </div>

    <div id="Exe2">
        <p>Caixa 1</p>
        <p>Caixa 2</p>
        <p>Caixa 3</p>
        <p>Caixa 4</p>
        <p>Caixa 5</p>
        <p>Caixa 6</p>
        <p>Caixa 7</p>
    </div>
</body>
</html>
```

{% endtab %}

{% tab title="CSS" %}

```css
p {
    border: mediumvioletred 2px solid;
}

#Exe1 {
    border: black 2px solid;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#Exe2 {
    border: black 2px solid;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
```

{% endtab %}

{% tab title="Resultado" %}
![](/files/-MZiW9D_yeGiek_-Z1ea)
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://uclsanca.gitbook.io/learn/web-basico/css/flexbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.