WebDev

Flexbox

Aula 4

USPCodeLab

Facebook:

https://facebook.com/uspcodelab/

Este trabalho do USPCodeLab  está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional

O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP

Site:

https://codelab.ime.usp.br/

Layout em CSS

CSS Flow Layout

 

CSS Flexible Box Layout Module


CSS Grid Layout

Flexbox

Dois principais conceitos

contêiner

item

Flexbox

abrir para acompanhar

Contêineres

nada a ver com Docker

Como crio um contêiner de Flexbox?

.container {
    display: flex;
}

apenas um seletor qualquer

Contêineres

contêiner

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

contêiner

eixo principal

eixo secundário

Contêineres

contêiner

.container {
    display: flex;
    flex-direction: row-reverse;
}
.container {
    display: flex;
    flex-direction: column-reverse;
}

contêiner

eixo principal

eixo secundário

Quando as coisas não cabem

contêiner

item

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

Quando as coisas não cabem

contêiner

item

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

(comportamento padrão)

Shorthands!

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.container {
    display: flex;
    flex-flow: row nowrap;
}

flow = direction + wrap

Espaços em branco

A disposição dos itens dentro de um contêiner pode ser feita nos seus dois eixos

justify-content dispõe no eixo principal (main)

align-items dispõe no eixo secundário (cross)

Espaços em branco - main

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

Espaços em branco - main

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

Espaços em branco - main

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

Espaços em branco - main

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

Espaços em branco - main

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
}

Espaços em branco - main

Espaços em branco

A disposição dos itens dentro de um contêiner pode ser feita nos seus dois eixos

justify-content dispõe no eixo principal (main)

align-items dispõe no eixo secundário (cross)

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

Espaços em branco - cross

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
}

Espaços em branco - cross

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

Espaços em branco - cross

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

Espaços em branco - cross

contêiner

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: baseline;
}

text

text

text

text

Espaços em branco - cross

Item

contêiner

.um-item {
    align-self: flex-end;
}

Item - Auto posicionamento

Item - Ordem

-2

0

8

100

.um-item {
    order: -2;
}

.outro-item {
    order: 0;
}
.mais-outro-item {
    order: 8;
}

.ultimo-item {
    order: 100;
}

Tarefa

entrega no Google Classroom

  • Realize as tarefas do Flexbox Froggy;
  • Refaça a tarefa 3 pensando em como construir a navbar e os cards de cursos do site utilizando flexbox

WebDev

Agradecemos a atenção :)

Made with Slides.com