ILP-540 – PROGRAMAÇÃO WEBPAGES

CSS
Pa r t e 0 4

T E C - SP
FA
d a S il va Santos
rof a. E l i sabete
P
TÓPI FLEXBOX

COS
Box Flexíveis
 FLEXBOX

Box Flexíveis

Modo de escrita ocidental (ltr)

 “Flexbox foi projetado tanto como um modelo de layout unidimensional quanto como um
método capaz de organizar espacialmente os elementos em uma interface, além de possuir
capacidades avançadas de alinhamento” (Mozilla). (Substitui o float e o position em
Layouts!)
 FLEXBOX - I

Propriedades e Valores do Container (Box “pai”)

 display (Define um contexto flex ao container e seus filhos diretos). flex | inline-
flex
 flex-direction (Define eixos: Principal | Transversal = perpendicular).
row | column | row-reverse | column-reverse
 flex-wrap (Define o encolhimento dos itens ou a quebra de linha).
nowrap | wrap | wrap-reverse

 flex-flow (atalho para flex-direction + flex-wrap).

ex.: flex-flow: row wrap;
 FLEXBOX - II

Alinhamento, Justificação e Distribuição de Espaço no Container

 justify-content (largura/posição/espaço dos itens no eixo principal)

flex-start | center | flex-end |

space-between | space-around | space-evenly

 align-items (altura/posição/espaço dos itens no eixo transversal)

stretch (maior altura/largura )| flex-start | center | flex-end |baseline

 FLEX ITEMS - I

Propriedades para os itens - I

 flex-basis (tamanho inicial dos elementos em pixels antes da distribuição dos espaços
remanescentes. Se os elementos não possuírem um tamanho padrão, as dimensões dos
seus conteúdos serão passadas como parâmetro para propriedade flex-basis.).
auto | valor em px

 flex-grow (aumenta a largura dos elementos dentro do contêiner para completar o espaço
disponível no eixo principal, a partir de flex-basis).
1 (Serão distribuídos igualmente espaços pelos elementos| inteiro positivo
 FLEX ITEMS - II

Propriedades para os itens

 flex-shrink (controla a redução dos elementos dentro do contêiner caso não haja espaço
suficiente para todos os itens). 
inteiro positivo (item com valor maior diminuirá mais do que os “irmãos”). 

 flex (atalho para flex-grow, flex-shrink e flex-basis – na respectiva ordem).

Ex.: flex: 0 1 auto; /* Padrão inicial ou initial */

flex: 1 1 auto; /* Ou auto */

flex: 0 0 auto; /* Elemento inflexível ou none */

flex: 2 5 200px; /* Outros valores... */

 EXEMPLO - HTML
(lista)

HTML

<ul class="flex-container">
<li class="flex-item">1</li>

<li class="flex-item">2</li>

<li class="flex-item">3</li>

<li class="flex-item">4</li>

<li class="flex-item">5</li>

<li class="flex-item">6</li>

</ul>
Obs.: O elemento ‘pai’ pode ser qualquer elemento de bloco.
 EXEMPLO – CSS I
(body)

CSS

Aparência geral da página

body {
font-size: 20px;
background-color: #880;
color: #fff;
}
 EXEMPLO – CSS II
(Container)

/* Propriedades definidas com os valores padrão. */

.flex-container {
display: flex;
flex-wrap: nowrap;
flex-direction: row; /* Define o eixo Principal */
justify-content: flex-start; /* Alteração no eixo Principal */
align-items: stretch; /* Alteração no eixo Transversal */
background-color: #00f;
margin: auto;
height: auto;
list-style: none;
padding: 0;
}
 EXEMPLO – CSS II
(Container)

.flex-item {
flex: 1 1 100px; /* Atalho: flex-grow|flex-shink|flex-basis */
width: 100px;
height: auto;
background-color: deeppink;
padding: 5px;
border: solid 1px yellow;
line-height: 130px;
font-weight: bold;
font-size: 2em;
text-align: center;
}
 CENTRALIZAÇÃO
PERFEITA!

EXEMPLO CSS

HTML html, body {

height: 100%;
<div class="flex-container">
}
<div></div>

</div>
/* Continua... */
 CENTRALIZAÇÃO
(Continuação)

.flex-container { .flex-container > div {

display: flex;
background-color: #eee;
justify-content: center;
width: 100px;
align-items: center;

height: 100%; height: 100px;

background: olive; }
}
 FLEXBOX

Saiba mais:

 https://www.alura.com.br/artigos/css-guia-do-flexbox

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

 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/
Basic_Concepts_of_Flexbox
ILP540 – CRIAÇÃO DE
WEBPAGES

CSS – Parte 04

Fatec-SP
Profa. Elisabete da Silva Santos