Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • CSS Layouts: Aula 2

    Enviado por

    Klinger Farias
    13 visualizações20 páginas
    Este documento resume uma aula sobre layouts com CSS, abordando recapitulação sobre tabelas e floats, introdução ao Flexbox, propriedades do Flexbox e um exercício prático para construir um Photo Grid usando Flexbox.

    Descrição original:

    Título original

    Untitled

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Este documento resume uma aula sobre layouts com CSS, abordando recapitulação sobre tabelas e floats, introdução ao Flexbox, propriedades do Flexbox e um exercício prático para construir um Photo Grid usando Flexbox.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    13 visualizações20 páginas

    CSS Layouts: Aula 2

    Enviado por

    Klinger Farias
    Este documento resume uma aula sobre layouts com CSS, abordando recapitulação sobre tabelas e floats, introdução ao Flexbox, propriedades do Flexbox e um exercício prático para construir um Photo Grid usando Flexbox.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 20

    CSS

    LAYOUTS

    AULA 2
    TÓPICOS
    A SEREM Recap: Table, Float
    ABORDADOS O que é Flexbox 

    Propriedades do Flexbox

    Exercício Prático 2:
    Photo Grid
    RECAP: TABLE
    E FLOAT
    TABLE Os famosos <table>, <td>, <tr>.

    Tudo começou com a tag <body> e a


    propriedade margin. os sites em
    sua maioria eram centralizados.

    Com o <table> os sites começaram a


    ser um pouco melhor estruturados
    com um layout de grades e claro,
    dentro dos padrões dos anos 90.
    FLOAT Não era a solução ideal, mas era o
    que tínhamos naquela época.

    O float foi usado por muitos anos


    como uma propriedade para
    estruturarmos os posicionamentos
    nas páginas.

    Ele serve para retirarmos um


    elemento dentro do seu fluxo
    normal e deixarmos "flutuando"
    no container.
    FLEXBOX
    FLEXBOX O flexbox é um conjunto de
    ferramentas para a criação de
    layouts e grids responsivos de
    forma mais fácil e rápida.
    Ele é unidimensional, ou seja,
    linha ou coluna.

    Para começarmos a usar precisamos


    incluir dentro da classe do
    elemento a propriedade
    display:flex.
    Compatibilidade do Flexbox. Fonte: Can I use?
    https://caniuse.com/
    FLEX
    É um atalho para as propriedades
    flex-grow, flex-shrink e flex-basis

    FLEX-GROW
    Define quanto o item crescerá em relação
    ao resto dos itens flexíveis dentro do
    mesmo container PROPRIEDADES
    FLEX-SHRINK DO FLEXBOX
    Define como o espaçamento interno será
    reduzido em relação ao restante dos itens
    flexíveis dentro do mesmo container

    FLEX-BASIS
    Define comprimento inicial
    de um item flexível
    FLEX-DIRECTION
    Define que tipo de direção o nosso flex
    item vai seguir, se ele vai ter um tipo
    linha (row, row-reverse) ou coluna
    (column, column-reverse)

    FLEX-WRAP PROPRIEDADES
    Define se os itens devem quebrar ou não
    a linha. Usando o wrap você determina
    DO FLEXBOX
    que essa quebra seja realizada

    FLEX-FLOW
    É um atalho para as propriedades 
    flex-direction e flex-wrap
    JUSTIFY-CONTENT
    Define o posicionamento dos elementos de
    forma horizontal, seja à esquerda (flex-
    start), ao centro (center), à direita
    (flex-end) ou alinhado entre os dois
    lados (esquerda e direita) de forma
    fluída (space-between) PROPRIEDADES
    DO FLEXBOX
    ALIGN-ITEMS
    Define o posicionamento dos elementos de
    forma vertical seja à esquerda (flex-
    start), ao centro (center), à direita
    (flex-end) ou ou alinhado à base do
    container (baseline)
    ALIGN-CONTENT
    Modifica o comportamento
    da propriedade flex-wrap de forma
    vertical. É semelhante ao align-items,
    mas em vez de alinhar itens flexíveis,
    ele alinha as linhas flexíveis

    PROPRIEDADES
    ALIGN-SELF
    Define o alinhamento do item selecionado
    DO FLEXBOX
    dentro de um container flexível

    ORDER
    Define a ordem de um item flexível em
    relação ao resto dos itens flexíveis
    dentro do mesmo container
    SAIBA FLEXBOX DEFENSE
    MAIS http://www.flexboxdefense.com/

    FLEXBOX FROGGY
    https://flexboxfroggy.com/

    W3SCHOOLS | CSS FLEXBOX


    https://www.w3schools.com/css/css3_flexbox.asp

    ORIGAMID | GUIA COMPLETO DE FLEXBOX


    https://origamid.com/projetos/flexbox-guia-
    completo/
    EXERCÍCIO PRÁTICO 2
    Construindo o nosso Photo Grid utilizando
    flexbox para posicionar os elementos
    INSTRUÇÕES
    Vamos dar continuidade ao nosso Photo Grid, mas dessa vez usando algumas das
    propriedades do Flexbox que aprendemos hoje na aula;

    Para esse exercício você precisa alinhar os blocos da lista de imagens que
    você criou no exercício anterior para que possam ficar lado a lado no desktop,
    mas no mobile ele terá que ficar um debaixo do outro;

    Para a página de detalhes a imagem precisa ficar do lado esquerdo e o bloco de


    texto no lado direito na versão desktop, mas no mobile precisa ficar um
    debaixo do outro.
    tradução livre: "Manter-se firme"
    CONTATINHOS
    GITHUB
    bezzocoaline

    TWITTER BONS ESTUDOS!


    @bezzocoaline

    LINKEDIN
    bezzocoaline

    Você também pode gostar