ETE GINÁSIO PERNAMBUCANO

CURSO: TÉCNICO EM DESENVOLVIMENTO DE SISTEMAS

PROFESSOR: JOSIAS CORDEIRO
PROGRAMAÇÃO EM
NOVAS TECNOLOGIAS II
(WEB)
2
CSS

3
CONTEÚDO

4
DISPLAY FLEXBOX
5
CONCEITO

A ideia por trás do flexbox é

O conceito do layout flexível é
que ele se comporte como a E isso é extremamente útil em
justamente o que o nome
água, que se adapta ao basicamente duas situações:
sugere: Flexibilidade.
recipiente.

- Layouts dinâmicos: Quando a

- Layout responsivo: Quando
exibição do conteúdo tende a como o layout é exibido se
uma mesma página web pode
mudar, como no caso de um existe um único item? E
ser utilizada em dispositivos
quadro de fotos ou uma quando existem 2? E quando
com resoluções bastante
listagem de dados dinâmicos. são 3?
diferentes.
Por exemplo:

6
 Entender a estrutura do Flexbox é importantíssimo
ESTRUTURA para dominar todas as funcionalidades que ele oferece.

De forma macro, o Flexbox se divide em 3 partes:

Container

Eixos

Item

7
CONTAINER

O container é o recipiente que contém o conteúdo flexível.

No CSS, este container é definido com display: flex;

Observe: Tudo o que estiver dentro do container se comportará como um item flexível.

Importante: Este comportamento não é herdado pelos itens flexíveis.

Para que um item flexível se comporte como um container flexível, a declaração display:

8
EIXOS
O container possui dois eixos, e isso define toda a estrutura de alinhamento e disposição dos elementos
flexíveis.

Os eixos funcionam como no plano cartesiano que aprendemos na matemática: Um define a horizontal (a
conhecida como reta X) e o outro a vertical (reta Y).

A grande sacada, é entender que é possível inverter a posição desses eixos.

Então, é importante lembrar que o flexbox trabalha com:

Eixo principal e eixo transversal.

A definição do eixo é feita através da propriedade flex-direction. Que pode ser row (que é a padrão) ou
column.

9
 flex-direction

• Quando a definição de flex- - justify-contente

direction é row, o eixo
principal é o horizontal e o - align-items
transversal é a vertical.
• Quando flex-direction estiver - align-content
definido como column, o eixo
principal é a vertical, e o - align-self
transversal é o eixo
horizontal. E essa definição - flex-basis
impacta no comportamento
de propriedades como: - flex-shrink

- flex-grow

10
COMPORTAMENTO

Para entender o
comportamento do
layout flex, vamos
dividir os elementos
em dois grupos:

Essa divisão é muito importante, pois as

propriedades são distintas. As que
CONTAINER ITEM
funcionam no container não se aplicam
nos itens e vice-versa.

11
 Display: flex;
Nome da propriedade CSS:
display Valor:
• Flex;
Descrição Define que este elemento se comportará como um container Flex.
Exemplo de uso:

.container {
​ isplay: flex;
d
}

12
 Nome da propriedade CSS:
flex-direction Valores permitidos:
• row

Direção dos eixos • column

Descrição Define a orientação de todas as definições dos itens,
alinhamento, ordem de flexibilidade (encolhimento ou
ampliação). Se a definição for row, os itens são renderizados um
ao lado do outro.

13
Exemplo de uso
.container { ​
display: flex;
flex-direction: column;
}

.container { ​
display: flex;
flex-direction: row;
}

14
Flex-Direction:column;

15
Flex-Direction:row;

16
Alinhamento nos Eixos

Descrição: Alinha os itens no eixo.

Justify-content alinha no eixo principal.

Align-items, no transversal.

17
Valores permitidos - justify-contente;

flex-start flex-end center

space- space- space-

between around evenly
18
Justify-contente:flex-start;

19
Justify-contente:flex-end;

20
Justify-contente:center;

21
Justify-contente: space-between;

22
Justify-contente: space-around;

23
Justify-contente: space-evenly;

24
Valores permitidos – stretch
align-itens:
Stretch
stretch é utilizada para esticar os itens dentro flex-start
do container flex, para que eles preencham
todo o espaço disponível na direção do eixo
transversal (cross-axis).
flex-end
Essa propriedade é útil quando você precisa
que os itens sejam dimensionados de forma
proporcional para preencher o container, por
exemplo, quando você tem itens de center
diferentes alturas e deseja que todos tenham
a mesma altura para que fiquem alinhados.

baseline

25
Align-itens:stretch;

Obs: o stretch é o valor padrão,

portanto não precisa configura-lo.

26
Align-itens:flex-start;

27
Align-itens: flex-end;

28
Align-itens: center;

29
Align-itens: baseline;

30
Alinhamento de Conteúdo

31
Align-content:
A propriedade `align-content` é utilizada para alinhar as linhas de um container flex quando há
espaço extra no eixo transversal (cross-axis). Essa propriedade só tem efeito quando existem várias
linhas de itens dentro do container, ou seja, quando a propriedade `flex-wrap` é definida como
`wrap`.

Os valores permitidos para a propriedade `align-content` são os mesmos da propriedade `justify-

content`, com exceção do valor `space-evenly`. São eles:

A propriedade `align-content` só afeta o layout do container quando há espaço extra no eixo

transversal (cross-axis) que não pode ser distribuído uniformemente entre as linhas de itens.
Quando todas as linhas têm a mesma altura ou quando não há espaço extra, a propriedade `align-
content` não tem nenhum efeito.

32
Valores permitidos – align-content;

flex-start flex-end center

space- space- space-

between around evenly
33
Align-content: flex-start

34
Align-content: flex-end;

35
Align-content: center;

36
Align-content: space-between;

37
Align-content: space-around;

38
Align-content: space-evenly;

39
Empacotamento

40
Propredade flex-wrap
A propriedade `flex-wrap` é utilizada para controlar o comportamento dos itens
dentro de um container flex quando o espaço disponível é insuficiente para
acomodar todos os itens em uma única linha (ou coluna, dependendo da
direção do fluxo).

41
 Valores permitidos flex-wrap
• Nowrap;
• Wrap;
• Wrap-reverse;

42
Flex-wrap: wrap;

43
Flex-wrap: nowrap;

44
Flex-wrap: wrap-reverse;

45
Direção + empacotamento (agrupamento)

46
 Capacidade de expansão
• Nome da propriedade CSS: flex.
• Descrição:
• A propriedade flex é uma abreviação para: flex-Grow, flex-shirnk e flex-basis
na sua ordem.

47
Flex-flow

48
fonte
• Torres, Dorian. CSS3: O guia completo do Flexbox (CSS Essencial) (Portuguese
Edition);
• What is Flexbox in CSS? (linuxhint.com)

49