CSS3Tutoriais Básicos

CSS3 Filtros (Filters)CSS3 Tamanho da Caixa (box-sizing)

CSS3 Alinhamento de caixa flexível

CSS3 flexible Box ou flexbox é um novo modelo de layout usado para criar designs de interface do usuário mais flexíveis.

Entenda o modelo de alinhamento Flex

Flexible box, geralmente chamado de flexbox, é um CSS3Introduzido em CSS, um novo modelo de layout, usado para criar designs de interface do usuário flexíveis com várias linhas e colunas, sem usar valores de comprimento fixo ou porcentagem.3 O modelo de alinhamento flexível oferece um mecanismo simples e poderoso que permite gerenciar automaticamente a distribuição do espaço e o alinhamento do conteúdo através de folhas de estilo, sem interferir no marcador real.

Este exemplo demonstra como usar o modelo de alinhamento flexível para criar um layout de três colunas, onde a largura e a altura de cada coluna são iguais.

Exemplo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3　Three Equal Flex Column</title>
<style>
　　　　.flex-container　{
　　　　　　　　width:　80%;
　　　　　　　　min-height:　300px;
　　　　　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　　　　　display:　flex;　
　　　　　　　　border:　1px　solid　#808080;
　　　　}
　　　　.flex-container div {
　　　　　　　　background:　#dbdfe5;
　　　　　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　flex:　1;　
　　　　}
</style>
</head>Item　1Item　2Item　3</html>

Teste e veja‹/›

Se você prestar atenção ao código de exemplo acima, você notará que não temos em .flex-interno do contêiner<div>Defina qualquer largura na parte superior, mas você pode ver que a largura de cada coluna é exatamente igual ao elemento pai.flex-terço do contêiner.

Como o layout Flex funciona

O Flexbox é composto por contêiner Flex e itens Flex. Você pode controlar a direção do fluxo dentro de um contêiner Flex, usandodisplayO atributo do elemento é definido como flex (gerandoblock-level contêiner Flex) ou inline-flex (gerando semelhante aoinline-blockPara criar um contêiner Flex, use o bloco de inline Flex contendo (o contêiner Flex) ou inline Flex. Todos os elementos filhos do contêiner Flex serão automaticamente itens Flex e serão alinhados usando o modelo de layout Flex.float，clearevertical-alignA propriedade não tem impacto nos itens com elasticidade.

Os itens de alongamento ao longoflex-directionA linha de alongamento especificada pela propriedade está dentro do contêiner de alongamento. Por padrão, cada contêiner Flex tem uma única linha de alongamento, cuja direção é a do eixo inline do padrão de escrita atual oude direção de texto. A figura a seguir ajudará você a entender os termos do layout Flex.

Especificar o fluxo interno do contêiner Flex

No modelo de caixa CSS padrão, os elementos geralmente são exibidos na ordem em que aparecem na marcação HTML subjacente. O layout Flex permite que você controle a direção do fluxo dentro de um contêiner Flex, de modo que os elementos podem ser alinhados em qualquer direção de fluxo, como para a esquerda, para a direita, para baixo ou até para cima.

Você pode usarflex-directionA propriedade especifica o fluxo dos itens flexíveis no contêiner flex. O valor padrão row é o mesmo que o padrão de escrita atual ou a direção do texto, por exemplo, inglês de esquerda para direita.

Exemplo

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: linha-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction: linha-reverse;
　　　　border:　1px　solid　#666;
}

Teste e veja‹/›

Da mesma forma, você pode exibir itens elásticos na forma de coluna dentro do contêiner elástico, em vez de usar flex-O valor da propriedade direction lista as colunas, conforme mostrado a seguir:

Exemplo

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: coluna;
　　　　
　　　　display:　flex;
　　　　flex-direction: coluna;
}

Teste e veja‹/›

Controle o tamanho dos itens de alongamento

O aspecto mais importante do alinhamento elástico é a capacidade dos itens elásticos de mudar sua largura ou altura para preencher o espaço disponível. Isso é feito atravésflexImplementado pelo atributo. Este é um atributo abreviadoflex-grow，flex-shrinkenquantoflex-basisAtributo.

O contêiner elástico distribui o espaço disponível proporcionalmente entre seus itens, ou os encolhe para evitar transbordamento, em proporção à sua constante de contração.

Exemplo

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　display:　flex;　
}
.flex-container div {
　　　　padding:　10px;
　　　　background:　#dbdfe5;
}
.item1,　.item3　{
　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　flex:　1;　
}
.item2　{
　　　　-webkit-flex:　2;　/*　Safari　*/
　　　　flex:　2;　
}

Teste e veja‹/›

在上面的示例中，第一个和第三个伸缩项目将占用1/4，即1/(1+1+2)的自由空间，而第二个伸缩项目将占用1/2，即2/(1+1+2)的自由空间。类似地，您可以使用这个简单的技术创建其他灵活的布局。

Atenção:强烈建议使用速记属性，而不是单独的flex属性，因为它可以正确重置未指定的组件。

在Flex容器中对齐Flex项目

有四个属性justify-content，align-content，align-itemsealign-self其目的是为了指定弹性容器内的弹性项目的对准。其中的前三个适用于flex容器，而最后一个适用于单个flex项目。

沿主轴对齐Flex项目

使用justify-content属性，可以将伸缩项沿伸缩容器的主轴（即在水平方向上）对齐。通常在弹性项目未使用主轴上所有可用空间的情况下使用。

justify-content属性接受以下值：

flex-start-默认值。弹性项目放置在主轴的起点。
flex-end -Flex项目位于主轴的末端。
center　　- Flex的项目放置在主轴线的与等量的自由空间在两端的中心。如果剩余的自由空间为负，即项目溢出，则弹性项目将在两个方向上均等溢出。
space-between　-的Flex项都沿着主轴线，其中第一项放置在主起始沿和最后一个放置在主端均匀地分布。如果项目溢出或只有一项，则此值等于flex-start.
space-around　-Flex项在两端均以一半大小的空间均匀分布。如果它们溢出或只有一项，则此值等于center。

下面的示例将向您展示不同justify-content属性值对具有固定宽度的多列flex容器的影响。

Exemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-justify-content: space-around;
　　　　
　　　　display:　flex;
　　　　justify-content: space-around;
}
.item1　{
　　　　width:　75px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　background: #2f97ff;
}

Teste e veja‹/›

沿横轴对齐Flex项目

可以使用align-items或align-self属性沿Flex容器的横轴（即垂直方向）对齐Flex项目。但是，在将align-items应用于flex容器时，该align-self属性将应用于单个flex项目，并覆盖align-items。这两个属性均接受以下值：

flex-start — Flex项目位于交叉轴的起点。
flex-end — Flex项目位于交叉轴的末端。
center　—伸缩项放置在横轴的中心，两端具有相等的可用空间。如果剩余的自由空间为负，即项目溢出，则弹性项目将在两个方向上均等溢出。
baseline　—每个弹性项目的文本基准（或内联轴）与最大的弹性项目的基线对齐font-size.
Esticar —Os itens flexíveis se esticam para preencher a linha ou coluna atual, a menos que sejam impedidos pelo tamanho mínimo e máximo de largura ou altura. align-O valor padrão da propriedade items.

O exemplo a seguir mostrará diferentes alinhamentos-O valor da propriedade items afeta os contêineres flexíveis de múltiplas colunas com altura fixa.

Exemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-align-items: center;
　　　　
　　　　display:　flex;
　　　　align-items: center;
}
.item1　{
　　　　width:　75px;
　　　　height:　100px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　height:　200px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　height:　150px;
　　　　background: #2f97ff;
}

Teste e veja‹/›

Você também pode distribuir o espaço disponível no eixo transversal de contêineres flexíveis de múltiplas linhas ou colunas. A propriedade align-content é usado para alinhar as linhas do contêiner flexível, por exemplo, se houver espaço extra no eixo transversal, alinhar as linhas do contêiner flexível de múltiplas linhas justify-align, semelhante ao alinhamento de um único item ao eixo principal.

O alinhamento do content-A propriedade content aceita o mesmo valor de justify-content, mas aplicado ao eixo transversal em vez do eixo principal. Ele também aceita outro valor:

EsticarO espaço disponível é distribuído uniformemente entre todas as linhas ou colunas para aumentar seu tamanho transversal. Se o espaço livre restante for negativo, este valor é igual ao flex-start.

O exemplo a seguir mostrará diferentes alinhamentos-O valor da propriedade content afeta os flex contêineres de múltiplas linhas com altura fixa.

Exemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　margin: 0 auto;
　　　　font-size:　32px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-flow: row wrap;
　　　　-webkit-align-content: space-around;
　　　　
　　　　display:　flex;
　　　　flex-flow: row wrap;
　　　　align-content: space-around;
}
.flex-container div {
　　　　width:　150px;
　　　　height:　100px;
　　　　background:　#dbdfe5;
}

Teste e veja‹/›

reordenar os itens Flex

Além de alterar o fluxo dentro do contêiner flexível, você também pode alterarorderA propriedade order exibe a ordem de um item flexível. Esta propriedade aceita valores de inteiros positivos ou negativos. Por padrão, todos os itens flexíveis são exibidos e organizados na ordem em que aparecem na marcação HTML, pois o valor padrão de order é 0.

O exemplo a seguir mostrará como especificar a ordem de um item flexível individual.

Exemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}
.flex-container div {
　　　　padding:　10px;
　　　　width:　130px;
}
.item1　{
　　　　background: #e84d51;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　background: #7ed636;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　background: #2f97ff;
　　　　-webkit-order:　-1;　/*　Safari　6.1+　*/
　　　　order:　-1;
}

Teste e veja‹/›

Atenção:Os itens com o valor de ordem mais baixo são colocados no início, enquanto os itens com o valor de ordem mais alto são colocados no final. Os itens com o mesmo valor de order serão exibidos na ordem em que aparecem no documento de origem.

Alinhamento horizontal e vertical do Flexbox

Normalmente, o alinhamento vertical dos blocos de conteúdo envolve o uso de JavaScript ou algumas técnicas rudimentares de CSS. No entanto, com flexbox, é possível fazer isso facilmente, sem qualquer ajuste.

O exemplo a seguir mostrará como usar CSS3A funcionalidade de caixa flexível permite alinhar vertical e horizontalmente os blocos de conteúdo no meio com facilidade.

Exemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;　
}
.item {
　　　　width:　300px;
　　　　padding:　25px;
　　　　margin: auto;
　　　　background: #f0e68c;
}

Teste e veja‹/›

Ativar o ajuste de linha do projeto elástico

Padrão. O contêiner flexível exibe itens flexíveis em uma linha ou uma coluna. Masflex-wrapSe não houver espaço suficiente em uma linha de flexão, você pode usar atributos do contêiner flexível para especificar se o item flexível deve ser quebrado em várias linhas.

Este flex-A propriedade wrap aceita os seguintes valores:

nowrap-Padrão. Itens flexíveis são colocados em uma linha. Se não houver espaço suficiente na linha de flexão, pode haver transbordamento.
wrap — O contêiner flexível quebra seus itens flexíveis em várias linhas, de maneira semelhante a como o texto é quebrado em novas linhas quando é muito largo para caber na linha atual.
wrap-reverse — Os itens flexíveis podem ser quebrados em linhas, se necessário, mas na ordem inversa, ou seja:Ponto Inicial Cruzado (cross-start)ePonto Final Cruzado(cross-end)As direções se inversarão.

O exemplo a seguir mostra como usar flex-A propriedade wrap exibe itens flexíveis em uma linha ou várias linhas dentro do contêiner flexível.

Exemplo

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　wrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　wrap;　　
}
.flex-container　div{
　　　　width:　130px;
　　　　padding:　10px;　　　　
　　　　background:　#dbdfe5;
}

Teste e veja‹/›

Atenção:Você ainda pode usar propriedades CSS abreviadas em uma única declaraçãoflex-flowDefinir flex-direction e flex-wrap. Ele aceita os mesmos valores que cada propriedade e os valores podem ser em qualquer ordem.

CSS3 Filtros (Filters)CSS3 Tamanho da Caixa (box-sizing)