61 / 68
61
REVISTA LOCAWEB
Sobre o autor
Homero Ottoni é programador e
sócio-proprietário da empresa Make
0HGLD GH GHVHQYROYLPHQWR ZHE
Compatibilidade com navegadores antigos é limitada
Este último exemplo
mostra a capacidade de
construir um conjunto de itens
em um conteiner de forma a
manter o posicionamento e
escala em qualquer resolução,
de forma simples e precisa.
No código html criamos
estes elementos:
<div class="wrapper">
<header
class="header">Cabeçalho</
header>
<article class="main">
<p>Lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus lorem ipsus
lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus
lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus lorem ipsus lorem
ipsus lorem ipsus
lorem ipsus lorem
ipsus .</p>
</article>
<aside class="aside
aside-1">Lado 1</aside>
<aside class="aside
aside-2">Lado 2</aside>
<footer
class="footer">Rodapé</
footer>
</div>
Na folha de estilo CSS,
estes itens e o conteiner,
e suas propriedades:
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row
wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: #49796b;
color: #FFFFFF;
}
.footer {
background: #a3c1ad;
}
.main {
text-align: left;
background: #a0d6b4;
}
.aside-1 {
background: #5f9ea0;
}
.aside-2 {
background: #5f9ea0;
}
@media all and (min-width:
600px) {
[
O USO DE LAYOUT FLEXBOX É BASTANTE SIMPLES,
DEMANDANDO POUCO ESFORÇO. ELE RESULTA EM UM
CÓDIGO LIMPO E DE FÁCIL MANUTENÇÃO
]
.aside {
flex: 1 auto;
}
}
@media all and (min-width:
800px) {
.main {
flex: 3 0px;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
body {
padding: 2em;
}
</style>
Eis o resultado: responsivo
e que se ajusta a qualquer
dimensão e resolução de tela.
CONCLUSÃO
O uso de layout FlexBox é
bastante simples, demandando
pouco esforço. Ele resulta
em um código limpo e de
fácil manutenção. Alguns
cuidados devem ser tomados.
Como qualquer recurso mais
moderno, a compatibilidade
com navegadores e dispositivos
mais antigos é limitada.