FlexBox - Uma visão geral

Maurício Samy Silva

Maujor®

http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com

FlexboxUma visão geral

block layoutinline layouttable layoutpositioned layout

Modelo layout CSS 3

Modelos layout CSS 2.1

flexible box layout (flex layout)

container

block layoutvertical axis

box 1

box 2

box 3

de cima

para baixo

container

para

d

ireita

inline layout

box 1 box 2 box 3

da e

sque

rda

horizontal axis

block / inline layout

main axiscr

oss a

xis

flex layout

main axiscr

oss a

xis

mai

n ax

iscross axis

flex layoutstart

star

t

end

endstart

end

star

t

end

.container { display: flex; }DIV P SPAN

main axis

flexitem

flexitem

flexitem

flex items = .container > *

adeus: float e clear;alinhamento: à esquerda, à direita, no centro, embaixo e em cima;ordem visual: invertida ou rearranjada;adaptar: as dimensões ao espaço disponível;equalizar: a altura.

Soluções

Suporte

Propriedades para containerjustify-contentflex-directionalign-contentalign-itemsflex-wrapflex-flowdisplay

Propriedades para flex-itemsflex-shrinkflex-basisflex-growalign-self

orderflex

Flex layout

na prática ao vivo e a cores

interface interativa

ir para a interface

Dúvidas?

Obrigado