FLEX BOX

Prévia do material em texto

FLEX BOXFLEX BOX
BRUNO AMORIM
1
ENTENDENDO
DE UMA VEZ POR TODAS
BRUNO AMORIM
2
Para que serve o Flexbox?
O Flexbox é uma ferramenta de layout em CSS que permite
criar designs flexíveis e responsivos para páginas da web.
Intuito do Flexbox
Imagina um Container, um container
de navio mesmo.
O que tem dentro de cada container?
Existe uma série de caixas, certo?
 
 
BRUNO AMORIM
3
 
Para poder distribuir os elementos da página,
iremos mexer na class CONTAINER
que é pai de todas as 3 caixinhas 
O CSS
FICOU
ASSIM
" Perceba que tem duas classes dentro das caixinhas, 
uma box e a outra box-1"
BRUNO AMORIM
4
 
COMO FICOU:
Propriedades do
DisplayFlex
 
BRUNO AMORIM
o Display flex por padrão vem com o flex-direction: row
 
1° Propriedade
flex-direction - define o eixo principal 
 
 flex-direction: row ( LINHA ) HORIZONTAL --------
flex-direction: column (COLUNA) VERTICAL |
Se eu quiser alinhar os elementos do EIXO PRINCIPAL que pode ser o ROW ou
COLUMN:
 
utilizamos o justify-content: 
então quando damos o justify-content, alinharemos os elementos ( 3 caixinhas )
na linha ou coluna.
propriedades do justify-content:
O que é o eixo principal?
Vai depender se o flex direction é row ou column
 
- flex-start, center, flex-end, space-between (ESPAÇO ENTRE
ELES), space-around ( ESPAÇO AO REDOR DELES ), space-
evenly
Se o flex-direction tiver como column e não tiver funcionando
as propriedades do Justify-content é porque
tem que definir uma altura para o Container.
O meu container, não TEM UM TAMANHO, ou seja, estará indo
de acordo com o Conteúdo.
5
 
BRUNO AMORIM
Além do eixo principal, também podemos alinhar no
eixo perpendicular, o eixo contrário.
Se row é o eixo principal, qual é o eixo contrário ?
R - Column ( vertical )
Para alinhar na Vertical, utilizamos o align-items
flex-start: alinha os itens ao início do contêiner flex
no eixo transversal.
flex-end: alinha os itens ao final do contêiner flex
no eixo transversal.
center: alinha os itens ao centro do contêiner flex
no eixo transversal.
1.
2.
3.
 
Propriedades:
EXEMPLOS
6
 
BRUNO AMORIM
Perceba que ainda não tem o align itens
Como ficou na página:
Sem o align itens:
7
 
A
pl
ic
an
do
 o
 a
lig
n-
te
ns
BRUNO AMORIM
8
 
Como ficou na página:
Lembrando que o align-tens mexeu
nos elementos na vertical.