O Flexbox (Flexible Box ou caixa flexivel) é um modulo da W3C responsável por fornecer uma maior eficiência para alinhar elementos tanto horizontalmente quanto verticalmente e distribuir espaço dentro de um container.
A principal idéia Flexbox é dar ao container a capacidade de alterar a largura, altura e ordem de seus itens para preencher o espaço disponível.
Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Nota: O Flexbox layout é mais apropriado para os componentes de um aplicativo e layouts de pequena escala, enquanto o Grid layout é destinado a layouts de grande escala.
O Flexbox não é apenas uma propriedade, na realidade é um modulo que envolve um conjunto de propriedades. Algumas configuradas no CONTAINER e outras no ITEM.
Basicamente, os itens serão definidos seguindo o
main axis (desde o main-start até o main-end) e/ou o cross axis (do cross-start ao cross-end).
Main Axis: O eixo principal do container.
Main-start | Main-end: Aonde o eixo principal do container começa(start) e aonde acaba(end).
Main Size A largura ou altura de um item flexível. É o tamanho principal do item.
Cross Axis Eixo perpendicular ao main axis chamado de eixo transversal. Sua direção depende da direção do eixo principal(flex-direction).
Cross-start | Cross-end: As linhas flexíveis são preenchidas com itens e colocadas no container, começando no cross-start do container e indo em direção ao cross-end.
Cross Size A largura ou a altura de um item flexível que está na dimensão cruzada(cross)
O Main Axis é manuseado pelo justify-content
e Cross Axis é manuseado pelo align-items.
Como falado antes, o flexbox possui propriedades para o container e para o item:
<div class="container">
<div>Item</div>
<div>Item</div>
</div>
.container {
display: flex;
flex-direction: row; /* default */
flex-wrap: nowrap; /* default */
flex-flow: row nowrap;/* default (shorthand) */
justify-content: flex-start; /* default */
align-items: stretch; /* default */
align-content: flex-start; /* default but no effect */
}
.item {
order: 1;
flex-grow: 1;
flex-basis: 200px;
flex: 1 200px;
}
(wrap, nowrap, wrap-reverse)
(flex-start(default), flex-end, center, space-between, space-around)
(flex-start, flex-end, center, baseline, stretch(default))
(flex-start, flex-end, center e stretch)
.container {
display: flex
}
.container-inline {
display: inline-flex
}
.row {
flex-direction: row
}
.row-reverse {
flex-direction: row-reverse
}
.column {
flex-direction: column
}
.column-reverse {
flex-direction: column-reverse
}
.wrap {
flex-wrap: wrap
}
.nowrap {
flex-wrap: nowrap
}
.wrap-reverse {
flex-wrap: wrap-reverse
}
.justify-start {
justify-content: flex-start
}
.justify-end {
justify-content: flex-end
}
.justify-center {
justify-content: center
}
.justify-around {
justify-content: space-around
}
.justify-between {
justify-content: space-between
}
.align-start {
align-items: flex-start
}
.align-end {
align-items: flex-end
}
.align-center {
align-items: center
}
.align-baseline {
align-items: baseline
}
.align-stretch {
align-items: stretch
}
.center {
justify-content: center;
align-items: center
}
.basis1 {
flex-basis: 100px
}
.basis2 {
flex-basis: 200px
}
.basis3 {
flex-basis: 300px
}
.basis4 {
flex-basis: 400px
}
.basis5 {
flex-basis: 500px
}
.basis6 {
flex-basis: 600px
}
.flex {
flex: 1;
}
.flex1 {
flex-grow: 1;
}
.flex2 {
flex-grow: 2;
}
.flex3 {
flex-grow: 3;
}
.flex4 {
flex-grow: 4;
}
.flex5 {
flex-grow: 5;
}
In a single collection, Font Awesome is a pictographic language of web-related actions.
Font Awesome is completely free for commercial use. Check out the license.
Originally designed for Bootstrap, Font Awesome works great with all frameworks.
One Font, 675 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.
Free, as in Speech.
Font Awesome is completely free for commercial use. Check out the license.
Plays Well with Others
Originally designed for Bootstrap, Font Awesome works great with all frameworks.
Gustavo Quinalha
Gustavo
Página inicial
Gustavo Quinalha
30 min
Like
Comment
Share
Título
Título
...