Iniciando com FlexBox

 em Desenvolvimento

Introdução

Antes de começar qualquer coisa temos que saber o que é o FlexBox. Para você que não sabe, FlexBox é um modelo do CSS que permite que os componentes sejam empilhados verticalmente e horizontalmente, isso é chamado de sistema de Grid, temos alguns bem conhecidos como CSS Grid e o Bootstrap. Aqui eu darei uma breve introdução ao FlexBox, um sistema de Grid que utiliza apenas CSS e HTML puro, e com algumas simples propriedades já da pra organizar seus componentes e deixar sua página responsiva.

Como usar o FlexBox

Bom, vamos começar… Para usar o FlexBox você precisa indicar que aquele componente é flexível, para isso basta usar o comando display: flex no container pai, após isso, qualquer propriedade do FlexBox que você colocar neste container irá funcionar (nos filhos).

Eu criei um simples exemplo para mostrar como funciona as propriedades do FlexBox.

<html>
<body>
    <style>
body {
background-color: rgb(230, 228, 228);
}
.container {
display: flex;
height: 100%;
}
.box {
width: 100px;
height: 100px;
background-color: lightskyblue;
border: 2px solid black;
}
</style>
    <div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
  </body>
</html>

Ficará assim:

Antes de começar, tenho que chamar atenção para o height: 100% que está dentro do container. Bom, quando você cria uma envoltura para as suas propriedades, por padrão, ela só irá ficar horizontalmente no espaço que as suas propriedades ocupam, para exemplificar, o container ocuparia está parte:

E isso altera algumas propriedades que iremos usar, até porque algumas delas não funcionariam. Mas isso vai variar, dependo de onde você vai usar o FlexBox. Então com o height: 100% o container ocupa todo espaço da tela.

1. Flex-Direction

flex-direction é a principal propriedade do FlexBox, e por quê? pois é ela quem define a direção dos componentes na tela, e é ela também altera a maioria das outras propriedades.

flex-direction pode ser row (que é o padrão), column , row-reverse e column-reverse

Ao adicionar flex-direction como column, os componentes da página ficam assim:

Estão alinhados em uma coluna. As propriedades reverse trocam a ordem dos componentes, então o primeiro será o último e o último o primeiro, mas como estou usando quadrados iguais, não fará diferença.

2. Align-Items

No tópico anterior eu disse que o flex-direction era a propriedade principal, vamos ver sobre isso agora com o align-items.

O que ele faz é basicamente alinhar o componente no eixo contrario de sua direção, por exemplo, se a direção do componente está horizontal, ou seja, o flex-direction dele é row (o padrão), então o align-itens irá alinhar os componentes na vertical. Se o flex-direction é uma column então ele irá alinhar na horizontal. Aqui vai um exemplo:

.container {
display: flex;
height: 100%;
flex-direction: row;
align-items: center;
}

Eu voltei o flex-direction para row (se eu apenas tirasse ele funcionaria também, mas assim é mais fácil para ver o que acontece) e adicionei também o align-items: center , ficou assim:

align-items pode ser flex-start onde ele fica no começo da página (o padrão), center onde ele fica no centro da página, flex-end onde ele fica no final da página, stretch onde ele preenche o container pai (ainda respeitando min-width e max-width ) e o baseline , onde os componentes irão se alinhar de acordo com a base do que tem dentro deles

2. Justify-content

Ele alinha os componentes, assim como o align-items porém ele alinha no mesmo eixo da direção dos componentes. Se o container for uma row, ele irá alinhar os componentes horizontalmente. Um exemplo:

.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}

Eu mudei algumas propriedades anteriores para melhorar o exemplo.

justify-content pode ter as mesmas propriedades do align-items (como center, flex-start… tirando o baseline e strench )e mais algumas como a que eu usei, o space-between que distribui os elementos na página toda (pela sua direção, no caso uma column) e deixa um espaço igual entre eles, e o space-around que faz o mesmo porém deixando um espaço no começo do container e no final.

3. Align-self

align-self faz com que algum componente seja alinhado separadamente, independente do container pai, ele possui as mesmas propriedades do align-items , veja o exemplo:

.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}

O container que envolve as caixas está dessa forma, adicionando o align-self em alguma das caixas fica assim:

<div class="box" style="align-self: flex-start;"></div>
<div class="box"></div>
...

4. Flex-wrap

flex-wrap faz com que se os componentes passarem do tamanho da tela, ele os manda para baixo (está propriedade é ótima para responsividade), como o exemplo:

.container {
display: flex;
height: 100%;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.box {
width: 400px;
height:100px;
background-color: lightskyblue;
border: 2px solid black;
}

Eu mudei o tamanho da caixa, para ela ter uma largura de 400px, mas como são 5 caixas, elas não caberiam na tela, então com flex-wrap como wrap a tela fica assim:

O padrão do flex-wrap é estar no-wrap , ele também pode ser wrap (como no exemplo) ou então wrap-reverse , onde as propriedades passam para cima se não couberem na tela (então seriam 3 caixas em baixo e duas em cima no exemplo)

5. Align-content

align-content funciona basicamente da mesma forma que o align-itensporém vou usar o exemplo do flex-wrap para dizer uma das principais diferenças. Bom, no exemplo anterior, eu usei o align-items: center e ele não alinhou os retângulos exatamente no centro, isso porque o align-items é para componentes que estejam em uma mesma linha, quando eles se separam como é o que acontece se eu coloco flex-wrap: wrap o align-items já não centraliza mais, nos precisamos usar o align-content , então eu vou apenas trocar o align-items: center pelo align-content: center

Agora sim os componentes estão todos alinhados no centro. Vale ressaltar que o align-content possui as mesmas propriedades do justify-content então é possível usar o space-between e o space-around

6. Flex-grow

flex-grow divide o container pai (a largura dele) em 10 partes, e você pode alocar quantas partes quiser para os componentes dentro dele.

.container {
display: flex;
height: 100%;
flex-direction: row;
}
.box {
height:100px;
background-color: lightskyblue;
border: 2px solid black;
}
</style>
<div class="container">
<div class="box" style="flex-grow: 1"></div>
<div class="box" style="flex-grow: 2"></div>
<div class="box" style="flex-grow: 1"></div>
<div class="box" style="flex-grow: 2"></div>
<div class="box" style="flex-grow: 4"></div>
</div>

Eu voltei as caixas ao normal, tirei o width e dei a cada uma um flex-grow com algum número, note que a soma dos números das caixas é 10, como o flex-grow divide a página em 10 partes, para que a divisão da página de certo o resultado tem que ser 10. Vale ressaltar que se o resultado não der 10, o resto é dividido igualmente entre as propriedades. Agora, veja como ficou o exemplo acima:

Veja que a 1° e a 3° caixa ficaram menores pois elas tem o flex-grow: 1 , a ultima ficou maior pelo flex-grow: 4 e a 2° e 4° ficaram um pouco maiores.

7. Flex-basics

flex-basics muda o tamanho de uma propriedade. Adicionei novamente o width: 100px nas caixas e coloquei o flex-basics da primeira como 300px

<div class="box" style="flex-basis: 300px;"></div>

“Mas então, qual a diferença de usar o flex-basics ou mudar o width da propriedade?”

Vamos voltar ao inicio do post para responder, lembra da primeira propriedade? o flex-direction então, como aqui os componentes estão em uma row o que é alterado com o flex-basics é o width mas se eles estivessem em column o height seria alterado, então o flex-basics ajuda a aumentar ou diminuir o tamanho de algum componente sem precisar dar um width ou height para eles, ou até mesmo a não altera-los.


Este é o fim do post, obrigado por ler até aqui, espero ter ajudado com essa introdução a FlexBox. Claro que a ferramenta é mais complexa, e não daria para abordar todos os componentes e diferenças entre eles aqui.

Se quiser ver um exemplo um pouco mais pratico, vou deixar aqui o link do meu GitHub onde contém um exemplo de FlexBox. Me contate pelo LinkedIn ou E-mail:

GitHub: https://github.com/BrenoP/Introducao-FlexBox-exemplo

LinkedIn: https://www.linkedin.com/in/brenoperetta/

E-mail: peretta.breno@gmail.com

Postagens Recentes

Deixe um Comentário

Comece a digitar e pressione Enter para pesquisar