Flexbox CSS

1
2
3
4
5
6
7
8

亲自试一试

Módulo de layout Flexbox CSS

Antes do módulo de layout Flexbox (ser lançado), os modelos de layout disponíveis eram os seguintes quatro:

  • Alinhamento bloco, usado para partes (seções) da página da web
  • Alinhamento inline, usado para texto
  • Tabela, usada para dados de tabela bidimensional
  • Alinhamento, usado para a posição explícita de elementos

O módulo de layout Flexbox, que permite projetar estruturas de layout responsivas flexíveis mais facilmente, sem a necessidade de usar flutuantes ou alinhamento.

Suporte do navegador

Todos os navegadores modernos suportam flexbox Atributos.

29.0 11.0 22.0 10 48

Elementos Flexbox

Para começar a usar o modelo Flexbox, você precisa primeiro definir o contêiner Flex.

1
2
3

Os elementos acima representam um contêiner flex com três itens flex (área azul).

实例

contendo um contêiner flex com três itens flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

亲自试一试

o elemento pai (contêiner)

através de display A propriedade é configurada para flexO contêiner flex será redimensionável:

1
2
3

实例

.flex-container {
  display: flex;
}

亲自试一试

A seguir estão as propriedades do contêiner flex:

Propriedade flex-direction

flex-direction A propriedade define em qual direção o contêiner deve empilhar os itens flex.

1
2
3

实例

column O valor define a empilhamento vertical dos itens flex (do alto para o baixo):

.flex-container {
  display: flex;
  flex-direction: column;
}

亲自试一试

实例

column-reverse O valor empilha os itens flex verticalmente (da baixo para o cima):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

亲自试一试

实例

row O valor empilha os itens flex horizontalmente (da esquerda para a direita):

.flex-container {
  display: flex;
  flex-direction: row;
}

亲自试一试

实例

row-reverse O valor empilha os itens flex horizontalmente (da direita para a esquerda):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

亲自试一试

Propriedade flex-wrap

flex-wrap A propriedade determina se deve ou não rolar os itens flex.

O exemplo a seguir contém 12 itens flex para melhor demonstrar a propriedade flex-wrap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

实例

wrap O valor determina que os itens flex serão rolados quando necessário:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

亲自试一试

实例

nowrap O valor determina que não haverá rolagem de itens flex (padrão):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

亲自试一试

实例

wrap-reverse O valor determina que, se necessário, os itens flex serão rolados na ordem inversa:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

亲自试一试

Propriedade flex-flow

flex-flow A propriedade é uma abreviação usada para definir tanto a propriedade flex-direction quanto a propriedade flex-wrap.

实例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

亲自试一试

Propriedade justify-content

justify-content A propriedade é usada para alinhar os itens flex:

1
2
3

实例

center O valor alinha os itens flex no centro do contêiner:

.flex-container {
  display: flex;
  justify-content: center;
}

亲自试一试

实例

flex-start O valor alinha os itens flex no início do contêiner (padrão):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

亲自试一试

实例

flex-end O valor alinha os itens flex no extremo do contêiner:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

亲自试一试

实例

space-around O valor exibe itens flex com espaçamento antes, entre e após as linhas:

.flex-container {
  display: flex;
  justify-content: space-around;
}

亲自试一试

实例

space-between O valor exibe itens flex com espaçamento entre as linhas:

.flex-container {
  display: flex;
  justify-content: space-between;
}

亲自试一试

Propriedade align-items

align-items A propriedade é usada para alinhar verticalmente os itens flex.

1
2
3

Nesses exemplos, usamos um contêiner de 200 pixels de altura para melhor demonstrar a propriedade align-items.

实例

center O valor alinha os itens flexíveis no meio do contêiner:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

亲自试一试

实例

flex-start O valor alinha os itens flexíveis no topo do contêiner:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

亲自试一试

实例

flex-end O valor alinha os itens flexíveis no fundo do contêiner:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

亲自试一试

实例

stretch O valor estica os itens flexíveis para preencher o contêiner (padrão):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

亲自试一试

实例

baseline O valor faz com que os itens flexíveis alinhem-se na linha base:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

亲自试一试

Atenção:Este exemplo usa diferentes font-size para demonstrar que os itens já estão alinhados no texto base:

1
2
3
4

Propriedade align-content

align-content A propriedade é usada para alinhar as linhas flexíveis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Nesses exemplos, usamos um contêiner de 600 pixels de altura e definimos a propriedade flex-wrap como wrap para melhor demonstrar a propriedade align-content.

实例

space-between O valor exibe a linha flexível com espaçamento igual entre elas:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

亲自试一试

实例

space-around O valor exibe a linha flexível com espaçamento antes, entre e depois:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

亲自试一试

实例

stretch O valor estica a linha flexível para ocupar o espaço restante (padrão):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

亲自试一试

实例

center O valor é exibido no meio do contêiner como linha flexível:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

亲自试一试

实例

flex-start O valor é exibido no início do contêiner como linha flexível:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

亲自试一试

实例

flex-end O valor é exibido no final do contêiner como linha flexível:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

亲自试一试

Centralização perfeita

Neste exemplo, vamos resolver um problema de estilo muito comum: centralização perfeita.

Solução: usar justify-content e align-items A propriedade definida como centralizada, então os itens flexíveis serão centralizados perfeitamente:

实例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

亲自试一试

Elementos filhos (itens)

Os elementos filhos diretos de um contêiner flexível tornam-se automaticamente itens flexíveis (flex).

1
2
3
4

Os elementos acima representam quatro itens flexíveis azuis dentro de um contêiner flexível cinza.

实例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

亲自试一试

Os atributos usados para itens flexíveis são:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

A propriedade order

order A propriedade define a ordem do item flex.

1
2
3
4

O primeiro item flexível no código não precisa ser exibido como o primeiro item no layout.

order O valor deve ser um número, o valor padrão é 0.

实例

order A propriedade pode mudar a ordem dos itens flexíveis.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

亲自试一试

A propriedade flex-grow

flex-grow A propriedade define quanto o item flexível vai crescer em comparação com os outros itens flexíveis.

1
2
3

Este valor deve ser um número, o valor padrão é 0.

实例

Faz com que a velocidade de crescimento do terceiro item flexível seja oito vezes maior que a dos outros itens flexíveis:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

亲自试一试

A propriedade flex-shrink

flex-shrink A propriedade define quanto o item flexível vai encolher em comparação com os outros itens flexíveis.

1
2
3
4
5
6
7
8
9

Este valor deve ser um número, o valor padrão é 0.

实例

Não deixe que o terceiro item flexível encolha tanto quanto os outros itens flexíveis:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

亲自试一试

A propriedade flex-basis

flex-basis A propriedade define o comprimento inicial do item flex.

1
2
3
4

实例

Define o comprimento inicial do terceiro item flexível como 200 pixels:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

亲自试一试

A propriedade flex

flex A propriedade é uma abreviação dos atributos flex-grow, flex-shrink e flex-basis.

实例

Faz com que o terceiro item flexível não possa crescer (0), não possa encolher (0) e tenha comprimento inicial de 200 pixels:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

亲自试一试

A propriedade align-self

align-self A propriedade define o alinhamento dos itens selecionados dentro do contêiner flexível.

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

1
2
3
4

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

实例

把第三个弹性项目对齐到容器的中间：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

亲自试一试

实例

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

亲自试一试

使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化：

亲自试一试

使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容：

亲自试一试

CSS Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性：

属性 描述
display 规定用于 HTML 元素的盒类型。
flex-direction 规定弹性容器内的弹性项目的方向。
justify-content 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow flex-direction 和 flex-wrap 的简写属性。
order 规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self 用于弹性项目。覆盖容器的 align-items 属性。
flex 属性简写：flex-grow、flex-shrink 以及 flex-basis。