Box flexível CSS3

Box flexível CSS3 é um modo de layout novo.

A finalidade de introdução do modelo de bolsa flexível disposição é o de proporcionar uma forma mais eficaz para providenciar um recipiente de sub-elementos, de alinhamento e de distribuição do espaço em branco.

Suporte a navegadores

Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.

Imediatamente após o número -webkit- navegador ou prefixo -moz- especificado.

Conteúdo da embalagem flexível CSS3

box flexível feito de um recipiente elástica (recipiente Flex) e os sub-elementos elásticos (rubrica Flex) Componentes.

recipiente elástica, definindo a propriedade de exibição é flexível ou inline-Flex será definido como o contêiner elástica.

O recipiente elástica contém um ou mais sub-elementos resilientes.

Nota: o recipiente exterior elástico e o elemento elástico é uma criança de prestação normal. box flexível apenas define como resistente os elementos filho dentro do esquema do recipiente elástica.

sub-elemento flexível é geralmente apresentada na caixa de linha elástica. Por padrão, cada recipiente é apenas uma linha.

A seguir mostra o elemento elástico elementos filho são exibidos em uma linha, da esquerda para a direita:

Claro, podemos modificar o arranjo.

Se definir a direction propriedade para rtl (da direita para a esquerda), o arranjo dos sub-elementos elásticos vai mudar, layouts de páginas mudança também seguiu:

flex-direção

flex-direction ordem especifica o sub-elemento elástico no recipiente pai.

gramática

flex-direction: row | row-reverse | column | column-reverse

flex-direction valores são:

• consecutivas: lateralmente, da esquerda para a direita (esquerda), o arranjo padrão.
• row-reverse: reverter lateralmente alinhados (justificado direita, para a frente da fila de trás, o último no topo.
• coluna: arranjo vertical.
• column-reverse: arranjo vertical inversa, a partir da linha de trás para a frente, e, finalmente, uma linha na parte superior.

O exemplo a seguir ilustra a row-reverse uso:

O exemplo a seguir ilustra a column usada:

Os exemplos seguintes demonstram a column-reverse utilização:

atributo justificar-content

alinhamento de conteúdos (justificar-conteúdo) sobre as propriedades elásticas do recipiente de aplicação, os itens de contentores elástico alinhado ao longo do eixo principal (eixo principal).

sintaxe justificar-conteúdo é como se segue:

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

Cada análise de valor:

• flex-start:
  

  projeto flexível para a primeira linha ao lado do enchimento. Este é o padrão. O primeiro principal-start a partir das bordas externas do produto elástica é colocada nas bordas principal de arranque da linha, e o flush subsequente, por sua vez colocado um termo elástico.

• flex-end:
  

  Projecto flexível para o fim da linha ao lado do enchimento. Os primeiros itens main-finais de fora os fios elásticos são colocados em bordas main-finais da linha, e o flush subsequente, por sua vez colocado um termo elástico.

• centro:
  

  projeto flexível centrado próximo a preencher. (Se o espaço livre restante é negativa, o projeto também vai transbordar elasticidade nos dois sentidos).

• espaço-entre:
  

  projeto flexível distribuídos uniformemente sobre a linha. Se o espaço for negativo, ou apenas um termo elástico, o valor equivalente ao flex-start. Caso contrário, main-começar a partir das bordas externas de primeira linha e um alinhamento item de elástico, enquanto principal linha-end ea margem lateral última um alinhamento termo elástica e distribuição dos itens restantes na linha elástica, adjacente igualmente espaçados itens.

• espaço-around:
  

  Projecto flexível distribuída uniformemente sobre a linha, em ambos os lados da metade esquerda do espaço. Se o espaço for negativo, ou apenas um termo elástico, o valor é equivalente ao centro. Caso contrário, a elasticidade do projecto ao longo da linha de distribuição e igualmente espaçados uns dos outros (por exemplo, é 20 p), enquanto deixando metade do intervalo (1/2 * 20 p = 10px) entre a cabeça e cauda em ambos os lados e o recipiente elástica.

Renderizações mostrar:

O exemplo a seguir demonstra o flex-end uso:

O exemplo a seguir demonstra o center uso s ':

Os exemplos a seguir demonstram o space-between o uso de:

Os exemplos a seguir demonstram o space-around utilizar:

alinham-itens de propriedade

align-items estabelecidos ou recuperar o elemento elástico sobre o lado da caixa de eixo (eixo vertical) em direcção de alinhamento.

gramática

align-items: flex-start | flex-end | center | baseline | stretch

Cada análise de valor:

• Flex-start: o lado limite do elemento elástico caixa de eixo (eixo vertical) em relação à posição inicial do eixo do lado vivo do limite de linha de partida.
• flex-final: elástica lado limite do eixo elemento da caixa (eixo vertical) contra a posição inicial para viver extremidade do eixo lado da fronteira linha.
• Centro: a caixa de elemento elástico colocado no meio do eixo do lado da linha (eixo vertical) em. (Se a dimensão for menor do que o tamanho da linha elástica do elemento da caixa, que tem o mesmo comprimento em ambas as direcções de transbordo).
• linha de base: os elementos da caixa, como eixo interno elástica e linha de eixo do lado é o mesmo, o valor do equivalente "flex-start '. Em outros casos, o valor será envolvida em alinhamento da linha de base.
• esticar: Se o tamanho do atributo caixa de margem especifica o tamanho do lado do eixo é 'auto', o seu valor será próximo aos itens de linha como o tamanho, mas seguirá a propriedade 'min / max-width / height' restrições.

O exemplo a seguir demonstra stretch(默认值) o uso de:

O exemplo a seguir demonstra o flex-start uso:

O exemplo a seguir demonstra o flex-end uso:

O exemplo a seguir demonstra o center uso s ':

O exemplo a seguir demonstra a baseline de uso:

propriedade flex-envoltório

atributoflex-envoltório é usado para especificar um modo elemento envoltório elástico caixa de criança.

gramática

flex-flow:  || 

Cada análise de valor:

• nowrap - Por padrão, o recipiente elástica como uma única linha.Neste caso criança resiliente pode transbordar recipiente.
• Wrap - recipiente elástica várias linhas.parte estouro da criança resiliente é colocado, neste caso, para uma nova linha, a linha interna pausa ocorrerá subchave
• wrap-reverter - a fim envoltório reversa.

O exemplo a seguir demonstra a nowrap uso:

O exemplo a seguir demonstra o wrap de uso:

O exemplo a seguir demonstra o wrap-reverse uso:

atributo alinhar-content

align-content atributo é usado para modificar o flex-wrap comportamento atributo. Similar align-items , mas não está definido o alinhamento dos sub-elementos elásticos, mas definir o alinhamento de cada linha.

gramática

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Cada análise de valor:

• stretch - padrão. Cada linha se estenderá para ocupar o espaço restante.
• flex-start - linhas de caixas empilhadas para a posição inicial do recipiente elástica.
• flex-end - linhas de caixas empilhadas para a posição de extremidade do recipiente elástica.
• center - fileiras de caixas empilhadas para a posição central do recipiente elástica.
• space-between - o recipiente bolsa flexível cada linha distribuído uniformemente.
• space-around - cada linha no recipiente bolsa flexível distribuído igualmente entre as duas extremidades para reter metade dos sub-elementos e sub-elementos tamanho espaçamento.

O exemplo a seguir demonstra o center uso s ':

atributos flexíveis sub-elemento

seqüência

gramática

order: 

Cada análise de valor:

• <Inteiro>: um valor inteiro utilizado para definir a ordem pela qual o pequeno valor da superfície de topo. Ele pode ser negativo.

order para definir as propriedades dentro das propriedades elásticas dos elementos filho recipiente elásticas:

alinhar

Configurações "margem" é o valor "auto", obter automaticamente o recipiente elástica no espaço restante. Assim, definir o valor de margem vertical de "auto", que permite que os sub-elementos elásticos são completamente voltada para a direcção de dois eixos do recipiente elástica.

Os exemplos a seguir estão no primeiro sub-elástica elemento definido margin-right: auto; . O espaço restante será colocado nos elementos certos:

centro perfeito

Os exemplos a seguir vai ser a solução perfeita para os problemas que geralmente se deparam centro.

caixa de elástico, o centro se torna muito simples, só quero definir o margin: auto; pode fazer os sub-elementos elásticos na direção axial em dois perfeitamente centralizada:

alinhar-self

align-self atributo é usado para definir a direcção de alinhamento do próprio elemento elástico sobre o lado do eixo (eixo vertical).

gramática

align-self: auto | flex-start | flex-end | center | baseline | stretch

Cada análise de valor:

• auto: Se o valor 'auto' 'alinhar-self', o valor calculado de elemento pai do elemento de valor "-itens alinhar ', se ele não tem pai, o valor calculado do" esticar ".
• Flex-start: o lado limite do elemento elástico caixa de eixo (eixo vertical) em relação à posição inicial do eixo do lado vivo do limite de linha de partida.
• flex-final: elástica lado limite do eixo elemento da caixa (eixo vertical) contra a posição inicial para viver extremidade do eixo lado da fronteira linha.
• Centro: a caixa de elemento elástico colocado no meio do eixo do lado da linha (eixo vertical) em. (Se a dimensão for menor do que o tamanho da linha elástica do elemento da caixa, que tem o mesmo comprimento em ambas as direcções de transbordo).
• linha de base: os elementos da caixa, como eixo interno elástica e linha de eixo do lado é o mesmo, o valor do equivalente "flex-start '. Em outros casos, o valor será envolvida em alinhamento da linha de base.
• esticar: Se o tamanho do atributo caixa de margem especifica o tamanho do lado do eixo é 'auto', o seu valor será próximo aos itens de linha como o tamanho, mas seguirá a propriedade 'min / max-width / height' restrições.

O exemplo que se segue demonstra os sub-elementos elásticos alinhar-auto efeito da aplicação de valores diferentes:

flexionar

flex atributo é usado para especificar a forma de alocar espaço para os sub-elementos elásticos.

gramática

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Cada análise de valor:

• none: palavra-chave nenhum calcular é: 0 0 auto
• [Flex-grow]: definição do índice de expansão caixa de elemento elástico.
• [Flex-encolher]: definição da relação de encolhimento caixa de elemento elástico.
• [Flex-base]: O valor de referência padrão define o elemento elástico da caixa.

O exemplo que se segue, um primeiro elemento elástico sub-ocupa 2/4 do espaço, os outros dois de cada quarto espaço:

mais exemplos

Criar uma página que responde usando uma caixa elástica

Propriedades da caixa flexíveis CSS3

A tabela seguinte lista comumente usado para a caixa nas propriedades elásticas: