Locaweb - Edição 62

58 / 68

58
DICAS PARA PROGRAMAR DE UMA
MANEIRA FÁCIL E DESCOMPLICADA
CODE/
FLEXBOX
120
MINUTOS
CONHECI-
MENTO
HTML E CSS INICIANTE
o princípio, eram a
lista e as páginas
lineares. Os códigos
html apenas
apresentavam os elementos
na página conforme sua
posição no código, um
sobre o outro. Rapidamente,
WDJV HVSHF¯ëFDV GH
posicionamento surgiram,
formando tabelas com
linhas, colunas, células que
permitiam posicionar imagens
textos e outros componentes,
como campos de formulários.
Mas tabelas sempre foram
limitadas, especialmente em
termos de ambientes dinâmicos.
Diferentes resoluções de tela e,
mais recentemente, dispositivos
como smartphones e tablets são
um pesadelo para designers e
desenvolvedores web.
Uma tabela, uma vez
formatada, se torna estática,
mesmo com as propriedades
width e height podendo ser
ajustadas na porcentagem.
A complexidade se torna
exponencial: quanto mais
complicado é o design (com
aumento de número de
elementos, linhas, colunas,
células aninhadas, etc.), mais
difícil é criar, manter e ter
estabilidade de design em
efetuar tarefas simples, como
centralizar um elemento ou
controlar o posicionamento em
diversos dispositivos e resoluções.
Uma das características
mais interessantes do layout
FlexBox é justamente o ajuste
íQR GH FRPSRQHQWHV GH
formulário, janelas, caixas de
texto e imagem. Basicamente,
o layout FlexBox consiste em
ÛFRQWHLQHU îH[Ü H ÛLWHQV îH[Ü $V
propriedades de cada um desses
elementos permitem dar grande
îH[LELOLGDGH D GHVHQYROYHGRUHV
Além disso, garantem a
possibilidade de se ajustar aos
espaços disponíveis.
ELEMENTOS
E PROPRIEDADES
Flex conteiner é o
elemento que envolve a
HVWUXWXUD 'HíQH VH XP HOHPHQWR
FRPR îH[ FRQWHLQHU FRP D
propriedade display, com os
YDORUHV îH[ RX LQOLQH îH[
Flex item são os elementos
N
Na página http://
.
com/cssref/
css3_pr_flex.asp,
há documentação
completa
sobre o Flex
Design como FlexBox
Use layout que permite ajuste fino de componentes de formulário,
janelas, caixas de texto e imagem Por Homero Ottoni
diferentes resoluções de tela e
dispositivos.
Para corrigir esses
problemas, surgiu o padrão
CSS que trouxe novos recursos
e controle, especialmente em
relação a posicionamento, ajustes
e criação de páginas responsivas.
E o FlexBox é um dos recursos
mais úteis nesse sentido.
CSS
Cascade Style Sheet é um
padrão de formatação com
ampla utilização atualmente em
desenvolvimento web, conhecido
como tableless. Mas, mesmo
com CSS, é bastante complicado
REVISTA LOCAWEB