Apostila de flexbox

Prévia do material em texto

Apostila de Flexbox 
Desenvolvida por Rafael Angrizani S. 
Entusiasta no ramo da tecnologia 
“Desenvolvida à todos aqueles que acham o conhecimento importante, 
e o buscam por conta própria” 
 
 1 
 
 
SUMÁRIO 
Introdução ao Flexbox ............................................................................................................................................ página 02 
Terminologia do Flexbox ....................................................................................................................................... página 03 
Propriedades gerais do Flexbox / Flex-Direction ....................................................................................... página 04 
Flex-Wrap ........................................................................................................................ ............................................. página 05 
Justify-Content ............................................................................................................................................................ página 06 
Align-items ....................................................................................................................... ............................................ página 08 
Align-Content ............................................................................................................................. ................................. página 09 
Flex-Flow / Order ..................................................................................................................................... ................ página 10 
Align-Self ....................................................................................................................................................................... página 11 
Flex-Grow ........................................................................................................................ ............................................. página 12 
Flex-Shrink ...................................................................................................................... ............................................. pagina 14 
Flex-Basis / Flex ........................................................................................................................................................ . página 16 
Exemplos com Imagens ....................................................................................................... .................................... página 18 
Bibliografia ................................................................................................................................................................... página 21 
 
 
 2 
 
FLEXBOX 
Flexible Box Layout é um tipo de display para organizar layout, por ser unidimensional é geralmente 
usado em layouts pequenos ou para organizar os conteúdos dentro do Grid Layout (tipo de display, que por 
ser bidimensional é usado em layouts mais avançados e complexos); Mas voltando o foco ao flexbox, veremos 
com se tornou prático e fácil, posicionar elementos dentro de seu site com este super display, 
desenvolvedores mais antigos acostumados a criar seus layouts com tabelas, ou usando o position, float right, 
float left, clear e depois uns hackezinhos para tentar corrigir erros que isto podia causar, sentem uma grande 
diferença na hora de programar usando esta maravilha que é o flexbox, outra boa prática do uso de flexbox é 
na criação de sites responsivos, pois com o flexbox isto mudou drasticamente, e com poucas linhas de código, 
é possível ter um site mais dinâmico e totalmente responsivo, e/ou adaptável aos mais variados tamanhos de 
telas disponíveis no mercado hoje. 
O uso do flexbox facilita a vida de qualquer desenvolvedor que o domine, pois corrige erros de box 
model, como padding, margin, e border, além do tamanho do elemento, e centralização vertical, o flexbox traz 
a ideia de que os filhos (hierarquia) com elementos flexbox podem se posicionar em qualquer direção, e ter 
dimensões flexíveis para se adaptar, você pode posicionar os elementos independente da sua posição na 
estrutura do html, o bom ao use usar flexbox, é que por ainda ser uma especificação você use os prefixos, 
-webkit-, -moz-, -ms-, e -o-. 
Antes de se usar o flexbox, verifique seu funcionamento e uso nos navegadores através do site do Can i Use. 
 
 
 
 3 
 
ENTENDA O FUNCIONAMENTO E A TERMINOLOGIA DO FLEXBOX 
 Flex Container: Você precisa definir um elemento para receber o flex-container com a propriedade 
display, com os seguintes valores: o flex ou inline-flex, veja no exemplo abaixo como se comportam os filhos 
da div id=pai, após o uso do display flex, note eles já se colocam alinhados na horizontal, porque este é o 
padrão. 
 
Flex-Items: São os elementos que serão filhos do flex Container. E recebem o alinhamento Cross Axis, 
ou seja o alinhamento transversal, que neste caso é o eixo que ocorre verticalmente, de baixo para cima e 
vice-versa. 
 
Veja no exemplo abaixo com é fácil centralizar uma div usando o flexbox. 
 
 
 
 
 
 4 
 
PROPRIEDADES GERAIS DO FLEXBOX 
 
 Box Model do Flexbox 
 
OBS: Se você determinar valor reverso como por exemplo flex-direction:row-reverse, os valores 
mudam de posição e se você estiver alinhando no main axis então onde era flex-start passa a ser flex-end, e 
assim sucessivamente, ou se estava alinhando no cross-axis onde era cross start passa a ser cross-end. E o 
mesmo acontece se você usar flex-direction:column, o eixo principal se torna o cross axis e secundário main 
axis, ou seja os eixos principais são os determinados em seu fluxo. 
Bom para iniciarmos os nossos estudos nas propriedades flexbox, vamos dividi-lo em duas partes, onde 
na primeira parte iremos estudar o flex-container e na outra os flex-items. 
PROPRIEDADES FLEXBOX PARA O CONTAINER (FLEX-CONTAINER) 
 Flex-Direction - Esta propriedade determina como os itens se acomodam no container, dizendo a 
eles em qual direção e sentido devem seguir sobre o eixo, e estes valores podem ser em linha main axis (um 
ao lado do outro)ou em coluna cross axis (um sobre o outro montando uma coluna). 
 
 5 
 
 
 
 
 
Flex-direction: row; ordena os flex-items da esquerda para a direita, sentido main start para main end. 
Flex-direction: row-reverse; ordena os flex-items dispondo-os da direita para esquerda e os invertendo, 
sentido main end para main start com seus flex-items invertidos. 
Flex-direction: column; ordena os flex-items em forma de coluna de cima para baixo, sentido cross start para 
cross end. 
Flex-direction: column-reverse; ordena os flex-items em forma de coluna no sentido de baixo para cima e 
inverte os flex-items, sentido cross end para cross start com os flex-items invertidos. 
 Flex-wrap – Este controla se o flex-item será single-line ou multi-line, e a direçãodo cross-axis, que 
determina em que direção novas linhas serão empilhadas. Na imagem abaixo o flex-direction:row está 
definido. 
 
 6 
 
 
 
Flex-wrap: no-wrap; Este é o valor padrão, se este estiver definido todos os flex-items são dispostos em linha, 
um ao lado do outro, no sentido main start para o main end. 
Flex-wrap: wrap; Com este é possível a criação de uma segunda linha caso a primeira não seja suficiente para 
todos os flex-items, tornando o conteiner multi-line, no sentido main start para o main end, do cross start 
para o cross end, e caso haja uma quebra de linha segue o mesmo sentido, ah não ser que outros atributos 
sejam definidos como veremos mais a frente, mesclando propriedades. 
Flex-wrap: wrap-reverse; Valor com a mesma função do wrap mas que inverteos flex-items. Ou seja continua 
da esquerda para a direita, mas fica de baixo para cima. 
 
Justify-Content: Alinha os flex-items através do eixo principal da linha atual do flex-container (se 
flex-direction:row então main axis, horizontal, se flex-direction:column então cross axis), também exerce um 
controle sobre o alinhamento dos itens quando eles se tornam multi-line. Eles ocupam o tamanho total do 
flex-container desde baixo até em cima o (cross end até o cross start). 
Na imagem abaixo o flex-direction:row está definido. 
 
 7 
 
 
 
 
Justify-Content: flex-start; Alinha os flex-itens a partir da esquerda para a direita um ao lado do outro dentro 
do flex-container, este é o valor padrão, sentido main start para o main end. 
Justify-Content: flex-end; Alinha os flex-itens a partir da direita para a esquerda sem desordenar os flex-itens, 
dentro do flex-container, sentido main end para o main start. 
Justify-Content: center; alinha os flex-itens no centro do flex-container, sentido main center e restante em 
direção ao main start e main end. 
Justify-Content: space-between; distribui os flex-itens igualmente no main axis dispondo eles a partir dos 
cantos direito esquerdo para o centro, sentido main start e main end em direção ao main center com 
distâncias iguais. 
Justify-Content: space-around; igual ao space-between com a diferença de que os flex-itens não são próximos 
as laterais main start e main end, na verdade ele possui margem esquerda e direita. 
 
 
 8 
 
Align-Items: alinha no eixo secundário ao determinado, ou seja, se flex-direction: row estiver 
definido, então o secundário é o eixo cross axis, se o flex-direction:column estiver definido, então será o main 
axis, da linha atual do flex-container. Align-items define o alinhamento padrão para todos os itens. E o 
tamanho é relacionado ao tamanho do conteúdo. Na imagem abaixo o flex-direction:row está definido. 
 
Align-items: flex-start; Alinha os flex-items no topo do flex-container, no decorrer do cross start. 
Align-items: flex-end; Alinha os flex-items na base do flex-container, no decorrer do cross end. 
Align-items: center; Alinha os flex-items no centro do flex-container, itens no centro do cross center. 
Align-items: baseline; Alinha os flex-items pela linha de base dos itens. 
Alignt-items: stretch; Os flex-items preenchem toda a altura do flex-container, ou seja de baixo até em cima, 
este é o valor padrão, posicionando-se à esquerda no main start em direção ao main end. O cross size (hight 
porque é eixo secundário, se fosse column seria width) é relativo ao tamanho do flex-container. 
 
 9 
 
Align-Content: Distribui as linhas de intens ao longo do eixo transversal (secundário), ou seja, se 
definido flex-direction:row então alinha no cross axis, se definido flex-direction:column alinha no main axis 
o Align-Content só apresenta algum efeito quando o container possui multi-line ou seja quando possui mais de 
uma linha dentro do container. Basicamente quando definimos o flex-wrap: wrap. 
Na imagem abaixo o flex-direction:row está definido. 
 
 
 10 
 
 
Align-content: flex-start; As linhas são dispostas na parte superior do container no cross start. 
Align-content: flex-end; As linhas são dispostas na base do container no cross end. 
Align-content: center; As linhas são agrupadas no centro do container no cross center, com total tamanho 
entre as extremidades. 
Align-content: stretch; Este é o valor padrão, neste as linhas se esticam par ocupar o tamaho total do 
flex-container, o espaço livre é dividido igualmente aumentando o seu cross size (altura). 
Align-content: space-between; Este “cola” as linhas nas extremidades, e são distribuídas uniformemente 
dentro do flex-container no sentido cross-axis(vertical), ou seja elas são distribuídas de cima para baixo e 
muito próximas das extremidades cross start e cross end. 
Align-content: space-around; Este é parecido com o space-between com a diferença de que as extremidades 
não ficam próximas, pois é como se as linhas criassem margens, e não chegam a se aproximar no cross end e 
no cross start. 
 
Flex-flow: É um atalho para definirmos duas propriedades ao mesmo tempo a flex-direction e flex- 
wrap, que em conjunto definem os eixos principais e transversais do recipiente flex. 
Flex-flow: row nowrap; Este é o padrão os itens são exibidos em uma única linha, da esquerda para a 
direita. Sentido main start para o main end e cross start para o cross end. 
Neste pode ser usado todos os valores flex-direction e flex-wrap disponíveis nesta ordem. 
 
PROPRIEDADES FLEXBOX PARA OS FILHOS (FLEX ITEMS) 
 Order: Determina a ordem com que os itens são exibidos no container, os itens podem ser 
reordenados sem a necessidade de alterar o html, os itens dentro do mesmo recipiente são apresentados em 
ordem crescente de acordo com seus valores, elementos com o mesmo valor serão mostrados na ordem em 
que aparecem no código fonte, o valor inicial de order é 0 (zero), é possível determinar um valor negativo. 
Order destina-se apenas a afetar a ordem visual dos elementos e não a sua ordem lógica ou de tabulação, 
order não deve ser usado em mídias não-visuais como a fala. Veja na imagem abaixo exemplos do uso de 
order. 
 Na imagem abaixo o flex-direction:row está definido 
 
 11 
 
 
Align-self: Permite sobrescrever o alinhamento padrão align-items, para itens individuais na linha 
atual, substituindo o valor. 
Align-self: auto; Valor padrão, é o valor do align-items no container do elemento, ou stretch. 
Align-self: flex-start; O item é alinhado através do cross start da linha. 
Align-self: flex-end; O item é alinhado através do cross end da linha. 
Align-self: center; A caixa de margem do item flex esta centrada no eixo transversal se o tamanho cruzado do 
item for maior que o do recipiente flex, ele irá transbordar igualmente em ambas as direções. 
Align-self: baseline; Se o eixo inline do flex item é o mesmo do cross axis, este valor é idêntico a flex-start, do 
contrário, participa do alinhamento pela linha-base (baseline), todos os items flex na linha são alinhados por 
sua baseline e o item com a maior distância entre sua baseline e a extremidade de cross start é colocado na 
linha de extremidade deste. O alinhamento de fallback para o first baseline é o start e o único para o last 
baseline é o end. 
Align-self: stretch; O conteúdo do flex-item é esticado do cross start até o cross end. 
Na imagem abaixo o flex-direction:row está definido 
 
 12 
 
 
Flex-Grow: Especifica a ampliação do item em relação aos outros, desde que haja espaço 
disponível, sendo que o valor inicial de flex-grow é 0 (zero), e não são aceitos números negativos. A 
propriedade flex-grow é geralmente usada em conjunto com a flex-shrink e a flex-basis, tendo como 
propriedade de declaração única, flex, até porque o valor que irá crescer é em relação ao flex-basis. 
Flex-grow: <número?>, você deve especificar o valor em forma de número, que você deseje que o flex-item 
cresça em relação aos outros. 
Na imagem abaixo o flex-direction:row está definido 
 
 
 13 
 
 
 
 14 
 
 
Flex-Shrink: ao contrário do flex-grow esta propriedade determina o fator de encolhimento de um 
flex-item, o valor a ser determinado é um número, o fator de encolhimento é determinado pela propriedade 
flex-basis quando distribui espaço negativo ente os itens. Se a soma de Main Size e Cross Size de todos os 
items for maior que o tamanho do flex container, é possível “encolher” estes flex items, desde que não 
possuam valor 0 (zero) . Um flex-item com o a propriedade flex-shrink : 2, diminuirá o dobrodo que item 
flex-shrink : 1. O valor padrão de cada flex-item é flex-shrink : 1 (por este motivo que quando você declara 
largura, ou altura aos flex-items, que se somados passam do tamanho do flex-container, eles estranhamente 
não saltam pra fora). Para que o browser reconheça o valor determinado em flex-basis quando a soma dos 
valores dos flex-items ultrapassarem o tamanho do container possa ser obedecido, você precisa declarar ao 
flex-container, a propriedade flex-wrap: wrap, que determina ao flex-container, que se caso não haja espaço 
disponível na mesma linha que os flex-items ocupem a linha abaixo, caso contrário eles ficarão exprimidos já 
que esta é a determinação padrão dada a cada flex-item com o flex-shrink: 1, claro se caso você não alterar 
este valor. A propriedade flex-shrink é usualmente usada em conjunto com o flex-grow e o flex-basis através 
da propriedade de declaração única flex. 
 
Na imagem abaixo o flex-direction:row está definido. 
 
 
 15 
 
 
 
 16 
 
 
Flex-Basis: Esta propriedade trata dos mesmos valores de width e height do flex-item(se o 
flex-direction:row estiver definido ele afeta na largura width, se o flex-direction:column estiver definido, 
então afetará na altura hight.) e determina o tamanho inicial do item antes mesmo do espaço livre ser dividido 
no container, flex-basis também determina o tamanho do box de conteúdo do container, salvo quando 
box-sizing estiver sendo usado. A propriedade flex-basis é usualmente usada em conjunto com o flex-grow e o 
flex-shrink através da propriedade de declaração única flex. Flex-basis pode receber valores numéricos, de 
porcentagem de pixels ou auto que é o padrão,(ocupando todo espaço disponível em relação ao eixo principal 
determinado, se flex-direction:row então de cima até embaixo, se column da ponta esquerda até a direita), o 
flex-basis se sobrepõe a qualquer valor como width e height que você queira determinar. 
Na imagem abaixo o flex-direction:row está definido. 
 
 
 Flex: Esta propriedade é a declaração única das propriedades flex-grow, flex-shrink, e flex-basis 
(nesta ordem), flex é usado para determinar o main size do elemento, os valores iniciais padrão são: 0 1 
auto (Itens sem ampliação, com redução para não extrapolarem o flex-container, e para seu tamanho ser em 
relação ao seu conteúdo), as propriedades flex-grow e flex-shrink são opcionais e podem ser omitidas da 
declaração do flex. Quando o valor de flex-grow é omitido este é como se fosse 1. Quando o valor de 
flex-shrink é omitido este é como se fosse 1. Quando o valor de flex-basis é omitido, considera-se que seja 0%. 
 
 17 
 
 
Além deste valor pré-determinado encontrado, considere outros três valores que seriam importantes 
estudar como: 
Flex: none; É o mesmo que flex: 0 0 auto, ou seja, os flex- itens não serão flexíveis, pois não crescerão (0), 
não se diminuirão (0) e seu tamanho será em relação ao conteúdo (auto). 
Flex: auto; È o mesmo que flex: 1 1 auto, ou seja, os flex-itens poderão crescer (1), poderão encolher (1), e seu 
tamanho será de acordo com o conteúdo (auto). 
Flex: N; É o mesmo que flex: N 0 0, ou seja, os flex-itens poderão crescer o N é um valor real que poderá ser 
determinado (N), não poderá encolher (0), e o tamanho será zero, vazio (0). 
 
 
EXEMPLOS COM IMAGENS 
 
 18 
 
 
 
 
 19 
 
 
 
 
 20 
 
 
 
 
Link para praticar o flexbox 
 
 https://codepen.io/justd/full/yydezN/ 
 
 
 
 
 
 21 
 
 
 
BIBLIOGRAFIA 
http://desenvolvimentoparaweb.com/css/flexbox/#section_flex-direction acessado em 03/01/18 
https://www.w3.org/TR/css-flexbox/ acessado em 28/12/17 
https://edsonjunior.com/um-guia-visual-para-flexbox/ acessado em 22/12/17 
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties acessado em 12/01/18 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox acessado em 07/01/18