Embed Size (px)
Citation preview
DIATINF/CNAT/IFRN
Design Web
Flexbox
Flexbox (Flexible Box Layout) é um modelo de layout flexível especificado pela CSS3. É
mais flexível do que a propriedade float.
Flexbox permite amplo controle da distribuição de elementos em um elemento de bloco
em termos de alinhamento, posicionamento e direção de fluxo.
Obs: quando se usa Flexbox, os outros esquemas de posicionamento são ignorados.
Logo, as propriedades float, clear, vertical-align e column-* deixam de
funcionar.
Nesta data (junho/2018), Flexbox ainda é uma recomendação candidata, mas já é
amplamente suportada pelos navegadores mais modernos.
Flex container e flex itens
Um flex container é um elemento de bloco estilizado com a propriedade display e o
valor flex. Flex items são os elementos filhos de um flex container. Estes flex items é
que terão suas propriedades de layout definidas por flexbox.
Exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: Arial;
background-color: #d9d9d9;
}
article{
display: flex;
}
section{
background-color: white;
border: 1px solid black;
padding: 0.3rem 0.6rem;
margin: 0.3rem;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<article>
<section id="section1">
<h3>Section 1</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate v
elit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</section>
<section id="section2">
<h3>Section 2</section>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia
non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?
</p>
</section>
<section id="section3">
<h3>Section 3</section>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque
corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et
dolorum fuga.
</p>
</section>
</article>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>
Obs:
• Veja as diferenças na renderização entre Firefox e Chrome.
• Observe o comportamento flexível dos flex items.
Eixos e direções
Para facilitar a comunicação e documentação de suas propriedades, Flexbox define a
terminologia indicada na figura a seguir.
• Main axis (eixo principal ou primário): eixo no qual os flex itens são distribuídos e
que determina a main dimension (geralmente horizontal). Os flex items são
distribuídos no sentido da main start para a main end (geralmente esquerda-
direita).
• Cross axis (eixo secundário): eixo perpendicular ao main axis e que determina a
direção da cross dimension (geralmente vertical). As flex lines seguem este eixo e
são distribuídas no sentido da cross start para cross end (geralmente cima para
baixo).
• Main size e cross size: são utilizados para determinar as dimensões dos flex items.
Observação: A figura anterior exemplifica páginas tipicamente projetadas para leitores
cujo sistema de escrita siga a orientação esquerda para a direita e de cima para baixo
(e.g., Português, Inglês, etc.). No entanto, repare que a orientação de escrita pode ser
modificada pelas propriedades CSS writing-mode e direction, bem como pelo
atributo HTML dir. Os eixos e sentidos de flexbox sempre seguem o modo de escrita
definido pelo documento. Ou seja, podemos ter um main start no lado direito do box
container bem como um main axis vertical.
Propriedade flex-direction
Define a direção e o sentido do main axis. Os valores possíveis são row (mesma direção
e sentido do modo de escrita – valor padrão), row-reverse (mesma direção que o modo
de escrita mas com sentido inverso), column (direção perpendicular ao do modo de
escrita) e column-reverse (como em column, mas com sentido inverso).
Exemplo
article{
display: flex;
flex-direction: row-reverse;
}
Figura 1: flex-direction: row-reverse
Figura 2: flex-direction: column
Propriedade flex-wrap
Por padrão, os flex items são inseridos na mesma linha ou coluna do flex container. A
propriedade flex-wrap é utilizada para alterar este comportamento. Os valores
possíveis são nowrap (define uma única linha ou coluna – valor inicial), wrap (permite a
quebra da linha ou coluna caso o espaço seja insuficiente para acomodar todos os flex
items) e wrap-reverse (como em wrap, mas a nova coluna é criada seguindo o sentido
inverso do cross axis).
Exemplo
article{
display: flex;
flex-wrap: wrap;
}
section{
background-color: white;
border: 1px solid black;
padding: 0.3rem 0.6rem;
margin: 0.3rem;
width: 45%;
}
Figura 3: flex-wrap: wrap
Figura 4: flex-wrap: wrap
Propriedade flex-flow
É uma propriedade facilitadora (shorthand) que podemos utilizar para definir,
respectivamente, os valores de flex-direction e flex-wrap em conjunto.
flex-flow: row wrap;
Propriedade justify-content
Esta propriedade é utilizada para alinhar os flex items através do main axis. Os valores
possíveis são flex-start (valor padrão), flex-end, center (distribui o espaço
adicional nas pontas), space-between (distribui o espaço adicional entre os itens) e
space-around (distribui o espaço igualmente entre os itens e as pontas).
Exemplo
article{
display: flex;
justify-content: flex-end;
}
section{
background-color: white;
border: 1px solid black;
padding: 0.3rem 0.6rem;
margin: 0.3rem;
width: 25%;
}
Figura 5: justify-content: flex-end
Figura 6: justify-content: center
Figura 7: justify-content: space-between
Figura 8: justify-content: space-around
Propriedade align-items
Esta propriedade é usada para definir o alinhamento dos flex items em relação ao cross
axis (geralmente vertical). Os valores possíveis são center (centro do contêiner), flex-
start (junto ao cross start), flex-end (junto ao cross end), stretch (todo o cross axis)
e baseline (alinha pela baseline dos flex-items, a qual depende do tamanho de fonte
utilizado).
Exemplo
article{
background-color: #a9a9a9;
display: flex;
justify-content: flex-end;
align-items: center;
}
Figura 9: align-items: center
Figura 10: align-items: flex-start
Propriedade align-content
Esta propriedade é utilizada para definir o alinhamento entre as linhas de um flex
container. Seu uso é semelhante ao da propriedade justify-content, mas no sentido do
cross axis. Assim, seu somente faz sentido em contêineres com mais de uma linha.
Explore as opções disponíveis apresentadas em
http://desenvolvimentoparaweb.com/css/flexbox/.
Propriedade order
Esta propriedade permite modificar a ordem de aparição dos flex items. Para tal, basta
utilizar um valor inteiro no item. O navegador seguirá a ordem crescente dos inteiros
utilizados. No caso em que há itens com mesmo valor, é adotada a ordem declaração do
HTML. Por padrão, todos os itens recebem o valor zero.
Exemplo
#section1{
order: 1;
}
#section3{
order: 2;
}
Figura 11: uso da propriedade order
Propriedade align-self
Esta propriedade define o alinhamento de um flex item, sobrescrevendo o alinhamento
definido pela propriedade align-items. Os valores possíveis são auto (valor padrão),
flex-start, flex-end, center, baseline e stretch.
Exemplo
article{
background-color: #a9a9a9;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#section1{
align-self: center;
}
#section3{
order: stretch;
}
Figura 12: uso da propriedade align-self
Propriedades flex-grow e flex-basis
flex-grow indica o fator de crescimento de um flex item, o qual deve ser um valor maior
ou igual a zero (zero é o valor padrão). Este fator determina a proporção de crescimento
de um item em relação aos outros itens.
Note que esta propriedade somente terá efeito quanto houver espaço em branco positivo
disponível na linha, isto é, quando a soma da largura dos itens for menor do que a largura
do contêiner.
Exemplo
#section1{
flex-grow: 1;
}
#section3{
flex-grow: 0;
}
Figura 13: uso da propriedade flex-grow
A propriedade flex-basis é comumente utilizada em conjunto com flex-grow, e sua
função é determinar o tamanho inicial de um flex item. Este tamanho inicial será utilizado
como referência para determinar o tamanho final de um flex item segundo a propriedade
flex-grow.
Exemplo
section{
background-color: white;
border: 1px solid black;
padding: 0.3rem 0.6rem;
margin: 0.3rem;
flex-basis: 25%;
}
#section1{
flex-grow: 1;
}
Propriedade flex-shrink
flex-shrink indica o fator de encolhimento de um flex item, o qual deve ser um valor
maior ou igual a zero (zero é o valor padrão). Este fator determina a proporção de
encolhimento de um item em relação aos outros itens.
Note que esta propriedade somente terá efeito quanto houver espaço em branco negativo
disponível na linha, isto é, quando a soma da largura dos itens for maior do que a largura
do contêiner.
Assim como flex-grow, flex-shrink é comumente utilizada em conjunto com flex-
basis.
Exemplo
section{
background-color: white;
border: 1px solid black;
padding: 0.3rem 0.6rem;
margin: 0.3rem;
flex-basis: 1000px;
}
#section1{
flex-shrink: 2;
}
Figura 14: uso da propridade flex-shrink
Propriedade flex-basis
Define o tamanho inicial de um flex item. Este tamanho poderá ser alterado caso sejam
utilizadas as propriedades flex-grow e flex-shrink. O valor padrão é auto, o qual
assumirá o mesmo valor da propriedade width.
Propriedade flex
Propriedade facilitadora para indicação conjuntas das propriedades flex-grow, flex-
shrink e flex-basis.
Referências
SILVA, Maurício Samy. CSS3: desenvolva aplicações web profissionais com uso dos
poderosos recursos de estilização das CSS3. São Paulo: Novatec, 2012.
http://desenvolvimentoparaweb.com/css/flexbox/
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3.org/TR/css-flexbox-1/
https://24ways.org/2016/css-writing-modes/
