Curso IT Fundamentos CSS 032_Layout Flexível Flex

Layout Flexível Flex

Durante muito tempo, as únicas ferramentas de criação confiáveis e compatíveis entre navegadores no layout CSS eram float e position. Essas duas ferramentas funcionam bem na maioria dos casos, mas em certos aspectos têm limitações que dificultam a conclusão das tarefas.

Os seguintes requisitos de layout simples são difíceis ou impossíveis de implementar de forma conveniente e flexível com essas ferramentas (float e position):

• Centralizar verticalmente um bloco de conteúdo dentro do conteúdo pai.
• Fazer com que todos os filhos de um contêiner ocupem uma quantidade igual de largura/altura disponível, independentemente de quanta largura/altura esteja disponível.
• Fazer com que todas as colunas em um layout de várias colunas adotem a mesma altura, mesmo que contenham quantidades diferentes de conteúdo.

O layout Flex do CSS é uma ferramenta de layout poderosa no CSS que pode ser usada para criar vários layouts flexíveis. Para dominar o layout Flex do CSS, você precisa dominar os seguintes pontos de conhecimento:

• Flex container (contêiner flex): O layout Flex é composto por contêineres Flex e itens Flex. O contêiner Flex é o contêiner que coloca os itens Flex no layout Flex. O contêiner Flex pode ser qualquer elemento, mas geralmente usa o elemento div.
• Flex item (item flex): Os itens Flex são elementos colocados no contêiner Flex. Os itens Flex podem ser qualquer elemento, mas geralmente usam o elemento div.
• Main axis (eixo principal): O eixo principal é a direção horizontal ou vertical dos elementos no layout Flex.
• Cross axis (eixo cruzado): O eixo cruzado é a direção vertical ou horizontal dos elementos no layout Flex.

Propriedades do contêiner Flex

O contêiner Flex possui as seguintes propriedades para controlar o layout Flex:

• display: Define o modo de exibição do contêiner Flex. O contêiner Flex deve ser definido como display: flex ou display: inline-flex para usar o layout Flex.
• flex-direction: Define a direção do eixo principal do layout Flex. Os valores podem ser flex-start alinhamento inicial do eixo principal, flex-end alinhamento final do eixo principal, row arranjo horizontal do eixo principal, row-reverse arranjo horizontal reverso do eixo principal, column arranjo vertical do eixo principal, column-reverse arranjo vertical reverso do eixo principal.
• flex-wrap: Controla se os itens dentro do contêiner Flex quebram linha. nowrap valor padrão, não quebra linha, wrap quebra linha, wrap-reverse quebra linha reversa.
• flex-flow: Abreviação de flex-direction e flex-wrap, dois valores correspondendo respectivamente a flex-direction e flex-wrap.
• justify-content: Define a maneira como os itens Flex no contêiner Flex são alinhados no eixo principal. Os valores podem ser flex-start alinhamento inicial do eixo principal, flex-end alinhamento final do eixo principal, center alinhamento central do eixo principal, space-between alinhamento médio do eixo principal (alinhamento nas extremidades do contêiner), space-around alinhamento médio do eixo principal (espaçamento igual entre itens) ou space-evenly alinhamento médio do eixo principal (espaçamento igual incluindo as extremidades).
• align-items: Define a maneira como os itens Flex no contêiner Flex são alinhados no eixo cruzado. Os valores podem ser flex-start alinhamento inicial do eixo cruzado, flex-end alinhamento final do eixo cruzado, center alinhamento central do eixo cruzado, stretch valor padrão ou baseline alinhamento da linha de base do texto da primeira linha do eixo cruzado. Atua apenas nos itens filhos do contêiner Flex.
• align-content: Assim como align-items, é uma propriedade que controla a maneira de alinhamento dos itens filhos no eixo cruzado, mas só tem efeito quando o contêiner Flex possui múltiplas linhas de eixo (situação de múltiplas linhas ou múltiplas colunas).

Propriedades dos itens Flex

Os itens Flex possuem as seguintes propriedades para controlar o layout dos itens Flex no layout Flex:

• flex-grow: Define a proporção de expansão do item Flex no eixo principal. O valor pode ser um número de ponto flutuante entre 0 e 1.
• flex-shrink: Define a proporção de contração do item Flex no eixo principal. O valor pode ser um número de ponto flutuante entre 0 e 1.
• flex-basis: Define a largura ou altura padrão do item Flex no eixo principal. O valor pode ser um valor de comprimento, valor de porcentagem ou auto.
• order: Define a ordem do item Flex no eixo principal. O valor pode ser um número inteiro entre 1 e 65535.

Exemplo:

1
/* Estilo do contêiner Flex */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* Direção do eixo principal é horizontal */
5
    justify-content: space-around; /* Maneira de alinhamento no eixo principal */
6
    align-items: center; /* Maneira de alinhamento no eixo cruzado */
7
    height: 200px; /* Definir altura do contêiner */
8
    border: 2px solid #333; /* Adicionar borda para melhor efeito de visualização */
9
}
10
/* Estilo dos itens Flex */
11
.flex-item {
12
    flex: 1; /* Dividir igualmente o espaço do eixo principal */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Contêiner Flex -->
2
<div class="flex-container">
3
    <!-- Item Flex 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Item Flex 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Item Flex 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

Efeito: