Flexbox do jeito certo


@gustavoquinalha

Gustavo Quinalha

FLEXBOX

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.

Fonte: css-tricks.com

The box

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)

Resumindo

O Main Axis é manuseado pelo justify-content

e Cross Axis é manuseado pelo align-items.

Flexbox Properties

Como falado antes, o flexbox possui propriedades para o container e para o item:

Pai(container)
Filho(item)
Filho(item)
<div class="container">
  <div>Item</div>
  <div>Item</div>
</div>
    Container
  • Display: flex | inline-flex
  • Flex-direction: row | row-reverse | column | column-reverse
  • Flex-wrap: nowrap | wrap | wrap-reverse
  • Flex-flow: shorthand
  • Justify-content: flex-start | flex-end | center | space-between | space-around
  • Align-items: flex-start | flex-end | center | baseline | stretch
  • Align-content: flex-start | flex-end | center | space-between | space-around | stretch
container

.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: integer
  • Flex-grow: number
  • Flex-shrink: number
  • Flex-basis: length | auto
  • Flex: shorthand
  • Align-self: auto | flex-start | flex-end | center | baseline | stretch
item

.item {
  order: 1;
  flex-grow: 1;
  flex-basis: 200px;
  flex: 1 200px;
}

Então...

Container é o elemento que envolve sua estrutura..
item
E Items são os elementos filho do container.
item
item
item
item

Container properties

display:

A propriedade display flex, ou inline-flex determina que o container é flex, sendo assim "ativando" as propriedas do flexbox.
display: flex
item
item
display: inline-flex
item
item

FLEX-DIRECTION:

A propriedade flex-direction determina se o fluxo principal sera em linhas ou colunas
(row, column, row-reverse e column-reverse).
flex-direction: row
1
2
flex-direction: row-reverse
1
2
flex-direction: column
1
2
flex-direction: column-reverse
1
2

FLEX-WRAP:

A propriedade flex-wrap determina se os elementos serão forçados a ficar em uma mesma linha ou se eles irão quebrar em várias linhas.

(wrap, nowrap, wrap-reverse)

flex-wrap nowrap
1
2
3
4
flex-wrap wrap
1
2
3
4

JUSTIFY-CONTENT:

A propriedade justify-content determina o fluxo no main-axis, organizando os itens horizontalmente.

(flex-start(default), flex-end, center, space-between, space-around)

justify-content: flex-start
1
justify-content: flex-center
1
justify-content: flex-end
1
justify-content: space-between
1
1
1
justify-content: space-around
1
1
1

ALIGN-ITEMS:

A propriedade Align-items determina o fluxo no cross-axis, organizando os itens verticalmente.

(flex-start, flex-end, center, baseline, stretch(default))

align-items: flex-start
1
align-items: center
1
align-items: flex-end
1
align-items: stretch
1

Item properties

ORDER:

A propriedade order determina o lugar que os elementos aparecerão.
order:
1(order: 1)
2(order: 2)
1(order: 2)
2(order: 1)

FLEX-GROW:

A propriedade flex-grow determina quão flex o item pode ser.
flex-grow:
flex-grow: 1
flex-grow: 1
flex-grow: 1
flex-grow: 2
flex-grow: 1
flex-grow: 3

FLEX-BASIS:

A propriedade flex-basis determina um tamanho mínimo mas flexível.
flex-basis:
flex-basis: 100px
flex-basis: 200px
flex-basis: 300px

ALIGN-SELF:

A propriedade align-self alinha apenas o item selecionado, no cross-axis.

(flex-start, flex-end, center e stretch)

align-self:
align-self: flex-start
align-self: center
align-self: flex-end
align-self: flex-end

EXEMPLOS


  .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;
  }

Conheça mais...

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.


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 Quinalha

Gustavo Quinalha

  

Gustavo Quinalha
30 min
Like
Comment
Share
Gustavo Quinalha
30 min
Like
Comment
Share

Gustavo Quinalha
30 min
Like
Comment
Share
Donald Trump anuncia cancelamento do acordo com Cuba
Camila Queiroz e Klebber Toledo vão comemorar aniversários juntos
Aline Dias exibe barriguinha de grávida
PRE reforça fiscalização durante feriado de Corpus Christi
Thais Fersoza exibe barrigão: "Vem Teodoro"

  
Título
Título
...

CASES

LINKS

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://speakerdeck.com/diogomoretti/css-layout-from-table-to-flexbox
  • https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
  • http://brolik.com/blog/when-to-use-flexbox/
  • https://codepen.io/enxaneta/full/adLPwv
  • https://facebook.github.io/yoga/
  • https://pt.slideshare.net/diegoeis/flexbox-to-the-people
  • https://speakerdeck.com/afonsopacifer/flexbox
  • http://slides.com/joanleon/flexbox-webcat/embed
  • http://slides.com/matt-soria/flexbox#/14
  • http://pt-br.learnlayout.com/flexbox.html

Obrigado!