Pare de chutar e aprenda como funciona Flexbox #01
Durante as lives que faço de segunda a sexta das 19:32 até as 22:32 (Brasília) na http://twitch.tv/marcobrunobr, toda vez que uso as propriedades do Flexbox alguém pergunta como elas funcionam, e essa também é uma das perguntas mais feitas no Discord da CollabCode. Por estes dois motivos e para fixar melhor o conhecimento, resolvi fazer uma série de posts falando com bastante detalhe sobre essas propriedades e a teoria do Flexbox. Então bora!!!
Flexbox foi desenvolvido para sermos muito mais felizes desenvolvendo layouts flexíveis, ou seja, nos ajuda muito quando estamos fazendo layouts para vários tamanhos de telas -- hoje em dia são raros os momentos que não. A última atualização que tivemos na documentação dele (no momento que escrevo esse post) foi no dia 19 de Novembro de 2018, então de fato é algo recente na web, mas suas propriedades já estão consolidadas e sendo usadas por Devs FrontEnd. Só tome cuidado que ela não é uma propriedade bala de prata pois tem sua limitações, ela não consegue criar comportamentos com texto como o float consegue, com ela não conseguimos fazer um menu fixo na tela como podemos fazemos com position: fixed, entre outras coisas que vou comentar e te provar na prática neste e nos próximos posts. Portanto, lembre de estudar as outras propriedades de posicionamento para não ficar com seu conhecimento limitado porque vai afetar sua eficiência e eficácia quando estiver codando seus layouts.
Ah! Se você souber bem como funciona display: block e display: inline, vai te ajudar bastante, não só eu acredito nisso como as ilustres pessoas a seguir também: Tab Atkins Jr. (Google), Elika J. Etemad / fantasai (Invited Expert), Rossen Atanassov (Microsoft) e talvez outros antigos editores da documentação do Flexbox na W3C.
Bom se você tem dificuldade com as tradicionais propriedades de posicionamento do CSS, recomendo você dar uma olhada no post a seguir que tem um link com explicação práticas para cada uma delas:
Meu objetivo com esses posts não é só fazer você usar as propriedades do Flexbox, quero te explicar e te mostrar como elas funcionam e com isso fazer com que você pare de chutar e compreenda o que está acontecendo de verdade quando aplica um simples, display: flex.
Flexbox e suas terminologias
Antes de partimos juntos para os exemplos práticos preciso alinhar com você algumas terminologias para nossa comunicação ficar mais feliz.
Quando usamos a propriedade display: flex ou display: inline-flex em um elemento HTML (tag) ele ganha o nome de flex container (caixa flexível) e todas as tags ou mesmo textos soltos que estão dentro dele chamamos de flex items (itens flexíveis), como ilustrado a seguir:
O flex container tem o poder de trabalhar em dois eixos, o main axis (eixo principal) que por padrão fica no eixo X (horizontal) e cross axis (eixo contrário) que por padrão fica no eixo Y (vertical). A imagem a seguir ilustra o que acabei de dizer, espero que ela te ajude a fixar:
Agora que comentei sobre os eixos, você pode estar se perguntando: Por que eu não só chamei de eixo X e eixo Y, pra que esse nomes todos aí? Vamos à resposta…
Nós temos propriedades do Flexbox que afetam o comportamento do main axis e outras propriedades que afetam o comportamento do cross axis, além disso temos a propriedade flex-direction: column que muda o main axis para o eixo Y ao mesmo tempo que muda o cross axis para o eixo X. Isto quer dizer que podemos mudar a direção do main axis e cross axis mas não mudamos os comportamentos deles. Parece confuso né? Quando colocarmos isto em prática ficará mais claro, por hora confie em mim e não fixe na sua mente que o main axis é no eixo X e o cross axis é no eixo Y. Isto é só o que vem por padrão quando usamos o display: flex ou display: flex-inline .
Agora você já deve estar ansioso para ver todas as propriedades do main axis e do cross axis e é aqui que devemos segurar nossa ansiedade e estudar um pouco mais sobre a teoria do Flexbox, então segura aí e continue comigo 😄
Por padrão todos os flex items seguem o sentido de leitura do idioma que você definiu para o seu site, se o seu site estiver em português o main axis terá o seu início na extremidade esquerda do flex container, chamamos esse início de main start, o fim ficará na extremidade direita do flex container que chamamos de main end. A seguir fiz uma ilustração para ajudar na fixação dessa teoria:
Show! Agora no cross axis o início fica na extremidade superior do flex container que chamamos de cross start e o fim na extremidade inferior do flex container que chamamos de cross end. Outra imagem para te ajudar a fixar:
Criando um flex container e os flex items
Para um elemento ser um flex container é necessário que ele tenha a propriedade display com um dos seguintes valores: flex ou inline-flex. A seguir vou explicar o funcionamento dessas duas propriedades:
display: flex
O elemento que tem essa propriedade tem o comportamento similar o display: block, portanto se ele não tem um largura definida ele ocupa 100% da largura do seu pai, se você definir um width para ele, ele terá sua largura alterada mas ainda sim ele não permite que outro elemento fique ao lado dele, fora isso, só com essa definição é que as propriedades do Flexbox começarão a ter efeito. Ah! Todos os elementos filhos dele viram flex items.
A ilustração a seguir mostra dois <articles> onde eles cada um deles têm a propriedade display: flex e dentro deles tem dois paragráfos, que possuem um width: 300px e height: 300px. Desta forma teremos dois flex containers cada um com seus dois flex items, os containers ficaram um abaixo do outro ocupando 100% da largura do seu pai ( <body> neste caso) e sua altura foi definida pela altura do maior de seus flex items. Mesmo os flex items sendo componentes em bloco, eles ficam um do lado do outro alinhados da esquerda para a direita seguindo o padrão do main axis.
display: inline-flex
Uma vez que você definir um elemento com essa propriedade, ele terá um comportamento similar ao display: inline-block, portanto ele permitirá que outros elementos fiquem ao lado dele e a sua largura por padrão será definida pela largura total dos seus filhos. Ah! A altura do container será definida pela altura do maior flex item . Com a definição dessa propriedade nós podemos usar as propriedades do Flexbox e todos os seus filhos viram flex items.
A ilustração a seguir tem os mesmos elementos da imagem anterior com os <article> definidos agora com display: inline-flex e dentro deles temos dois parágrafos com width: 300px e height: 300px. Agora os containers ficam um do lado do outro e como não definimos width e height para eles, quem determina isto são os seus flex items. Os flex items também seguem alinhados da esquerda para a direita de acordo com o main axis.
Agora já sabemos o que é flex container, flex item, main axis, main start, main end, cross axis, cross start e cross end. Sabemos também como criar flex containers e seus flex items. Chegou a hora de vermos as propriedades do Flexbox e vou separar estas propriedades em três grandes categorias, flex container, flex item e propriedades que mudam seu comportamento dentro de um flex container. Como são muitas propriedades, e já temos mais de 1300 palavras até aqui, cada categoria terá seu próprio post que linkarei aqui a medida que for escrevendo.
Propriedades do flex container
Main Axis
- flex-direction
- justify-content
Cross Axis
- flex-wrap
- align-items
- align-content
Main Axis e Cross Axis
- flex-flow
Propriedades do flex item
Main Axis
- order
- flex
- flex-basis
- flex-grow
- flex-shrink
- visibility: collapse (apesar de ser uma propriedade antiga, só funciona bem com o flex)
Cross Axis
- align-self
Propriedades que mudam seu comportamento dentro do flex container
- margin-top
- margin-bottom
- position: absolute
Se nestas listas aí de cima você acha que está faltando alguma propriedade, fique à vontade para entrar em contato pelo Discord da CollabCode ou pelas redes sociais onde eu também divulgo todos os meus novos posts:
