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”
 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

1
 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.

2
 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.

3
 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).
4
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.

5
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 inverte os 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.

6
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.

7
 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.

8
 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.

9
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

10
 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

11
 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

12
13
 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 dobro do 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.

14
15
 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%.
16
 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

17
18
19
 Link para praticar o flexbox

https://codepen.io/justd/full/yydezN/

20
 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

21