Skip to content
This repository was archived by the owner on Feb 7, 2021. It is now read-only.

Introdução ao Flexbox

Jump to bottom
Pedro Britto edited this page Jan 21, 2017 · 1 revision

Guias sobre Flexbox:

.class {
  display: flex;
  /* flex | inline-flex */
}

Propriedades Flex Container

Direção do conteúdo: flex-direction

Define não só a direção do conteúdo, se em linhas ou colunas, mas o arranjo dos eixos Main e Cross. Por padrão, o valor de flex-direction é row, com o Main Axis na horizontal (esq-dir) e o Cross Axis na vertical(cima-baixo). Se o valor for column, então o MA passa a ser na vertical (cima-baixo) e o CA na horizontal (esq-dir).

Isso é muito importante porque afeta o funcionamento das outras propriedades, principalmente justify-content e align-items.

.class {
  display: flex;
  flex-direction: row;
  /* row* | row-reverse | column | column-reverse */
}

Quebra de linha: flex-wrap 

.class {
  display: flex;
  flex-wrap: wrap;
  /* wrap | nowrap* | wrap-reverse */
}

Posicionamento dos itens no MA: justify-content

É responsável por alinhar os itens no Main Axis.

.class {
  display: flex;
  justify-content: ;
  /* center | flex-end | flex-start* | space-around | space-between */
}

Posicionamento dos itens no CA: align-items

É responsável por alinhar os itens no Cross Axis.

.class {
  display: flex;
  align-items: ;
  /* flex-end | flex-start | center | baseline | stretch* */
}

Propriedades Flex Item

Ordem dos elementos: order 

.item-x {
  order: 0 ;
  /* integer | default: 0 */
}

Preenchimento de espaço vazio: flex-grow

flex-grow determines how much of the available space inside the flex container an item should take up; it assigns more or less space to flex items.

.item-x {
  flex-grow: 1;
  /* 0* | 1 | positive integer */
}

Tamanho mínimo de um item: flex-basis

Define o tamanho mínimo de um flex item.

.item-x {
  flex-basis: 100px;
  /* 0* | positive integer */
}

flex shorthand

Define o tamanho mínimo de um flex item.

.item-x {
  flex: 1 1 20px;
  /* flex-grow | flex-shrink | flex-basis */
}

align-self

É responsável pelo alinhamento vertical (cross axis) de um flex item específico.

Notas

Com apenas .flex-container { display: flex; }:

  1. flex-items não expandem em flex-direction: row, a não ser com flex: 1 ou width: 100%.
  2. flex-items ocupam todo o espaço em flex-direction: column, mesmo sem as propriedades flex ou width do item anterior. Isso porque não é só a direção do empilhamento dos flex-items que muda, e sim toda a direção do flex container. O main axis passa a ser na vertical (cima-baixo) e o cross axis na horizontal(esq-dir), assim como o size, start e end de cada eixo. Além disso, o padrão de align-items é stretch, e é isso que faz flex-items em column ocuparem todo o espaço horizontal (cross axis).
  3. Por ocuparem todo o espaço por padrão, justify-content não parece ter efeito quando flex-direction: column.
  4. Se um flex-item precisar de mais espaço que outros em um mesmo container (ex: possui muito mais texto), os outros flex-items irão ser reduzidos para utilizar apenas o espaço necessário. Por padrão, os outros flex-items serão esticados na vertical para preencher o espaço do flex-container.
  5. Isso acontece porque o valor padrão de align-items é stretch.
  6. align-content é como justify-content, mas para o cross axis. Por isso serve apenas quando há espaço vertical sobrando no cross axis. Então é possível que só seja útil se houver uma declaração explicita de tamanho para o flex-container, além de flex-wrap: wrap.
  7. No caso anterior, para qualquer valor de align-items que não seja o padrão (stretch) os elementos não ocuparão todo o espaço, naturalmente.
  8. Por padrão, se não houver espaço suficiente para os flex-items em uma linha, eles "quebrarão" o container. Eles, porém, nunca ficarão pequenos o suficiente a ponto de "cortar" o conteúdo interno.

Exemplos

Como centralizar um item

Método 1

.container {
  display: flex;
  min-height: 50vh;

  justify-content: center;
  align-items: center;
}

Método 2

.container {
  display: flex;
  min-height: 50vh;

  justify-content: center;
}

.item {
  align-self: center;
}

Método 3

.container {
  display: flex;
  min-height: 50vh;
}

.item {
  margin: auto;
}

Links úteis:

CSS

O Básico

Grids

Flexbox

Pre-processadores

Outros

HTML

Otimização de Performance

Clone this wiki locally