Box flexível CSS3
Box flexível CSS3 é um modo de layout novo.
Box flexível CSS3 (Box flexível ou flexbox), quando a página é uma necessidade para se adaptar a tamanhos de tela e tipos de dispositivos diferentes quando os elementos têm de assegurar o layout comportamento adequado.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.
propriedade | |||||
---|---|---|---|---|---|
suporte básico (Flexbox-line Individual) | 29,0 21,0 -webkit- | 11.0 | 22,0 18,0 -moz- | 6.1 -webkit- | 12,1 -webkit- |
Multi-linha flexbox | 29,0 21,0 -webkit- | 11.0 | 28,0 | 6.1 -webkit- | 17,0 15,0 -webkit- 12.1 |
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:
Exemplos
<Html>
<Head>
<Style>
.flex-container {
display: -webkit-flex;
display: flexionar;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</ Style>
</ Head>
<Body>
<Div class = "flex-container">
<Div class = "flex-ponto"> Item Flex 1 </ div>
<Div class = "flex-ponto"> Item Flex 2 </ div>
<Div class = "flex-ponto"> produto Flex 3 </ div>
</ Div>
</ Body>
</ Html>
tente »
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:
Exemplos
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flexionar;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
tente »
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:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-flex-direction: row-reverse;
flex-direção: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
O exemplo a seguir ilustra a column
usada:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-flex-direction: Coluna;
flex-direção: Coluna;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
Os exemplos seguintes demonstram a column-reverse
utilização:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-flex-direction: coluna reversa;
flex-direção: Coluna-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
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:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-justificar-content: flexionar-end;
justificar-content: flex-fim;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
O exemplo a seguir demonstra o center
uso s ':
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-justificar-content: center;
justificar-content: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
Os exemplos a seguir demonstram o space-between
o uso de:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-justificar-content: o espaço-entre;
justificar-content: o espaço-entre;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
Os exemplos a seguir demonstram o space-around
utilizar:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-justificar-content: o espaço-around;
justificar-content: o espaço-around;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
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:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-align-itens: Estiramento;
alinhar-itens: esticar;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
O exemplo a seguir demonstra o flex-start
uso:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-align-itens: flexionar-start;
alinhar-itens: flex-start;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
O exemplo a seguir demonstra o flex-end
uso:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-align-itens: flexionar-end;
alinhar-itens: flex-fim;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
O exemplo a seguir demonstra o center
uso s ':
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-align-itens: center;
alinhar-itens: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
O exemplo a seguir demonstra a baseline
de uso:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-align-itens: linha de base;
alinhar-itens: linha de base;
width: 400px;
height: 250px;
background-color: lightgrey;
}
tente »
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:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-flex-wrap: nowrap;
Flex-wrap: nowrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}
tente »
O exemplo a seguir demonstra o wrap
de uso:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-flex-wrap: envoltório;
flexionar-wrap: envoltório;
width: 300px;
height: 250px;
background-color: lightgrey;
}
tente »
O exemplo a seguir demonstra o wrap-reverse
uso:
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-flex-wrap: wrap-reversa;
Flex-wrap: wrap-reversa;
width: 300px;
height: 250px;
background-color: lightgrey;
}
tente »
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 ':
Exemplos
display: -webkit-flex;
display: flexionar;
-webkit-flex-wrap: envoltório;
flexionar-wrap: envoltório;
-webkit-align-content: center;
alinhar-content: center;
width: 300px;
height: 300px;
background-color: lightgrey;
}
tente »
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:
Exemplos
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.primeira {
-webkit-ordem: 1;
ordem: 1;
}
tente »
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:
Exemplos
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex item: first-child {
margin-right: auto;
}
tente »
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:
Exemplos
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
tente »
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:
Exemplos
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flexionar-start;
alinhar-self: flex-start;
}
.item2 {
-webkit-align-self: flexionar-end;
alinhar-self: flex-fim;
}
.item3 {
-webkit-align-self: center;
alinhar-self: center;
}
.item4 {
-webkit-align-self: linha de base;
alinhar-self: linha de base;
}
.item5 {
-webkit-align-self: esticar;
alinhar-self: esticar;
}
tente »
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:
Exemplos
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
Flex: 2;
}
.item2 {
-webkit-flex: 1;
Flex: 1;
}
.item3 {
-webkit-flex: 1;
Flex: 1;
}
tente »
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:
propriedade | descrição |
---|---|
display | Especifica o tipo de caixa de elemento HTML. |
flex-direção | Especificar como organizar os elementos de nêutrons recipiente elástica |
justificar-content | Um elemento elástico na direcção da caixa do eixo (horizontal) de alinhamento. |
alinhar-itens | Um elemento elástico no eixo da caixa de laterais (eixo vertical) na direcção de alinhamento. |
Flex-wrap | Se um sub-elementos elásticos da caixa envoltório além do contêiner pai. |
alinhar-content | Modificar o comportamento da propriedade flex-envoltório, semelhante ao alinhar-itens, mas não definir as sub-elementos estão alinhados, mas o alinhamento do conjunto de linha |
flex-flow | flex-direção e envoltório flex-taquigrafia |
ordem | Uma caixa elástica elemento filho fim. |
alinhar-self | Use os elementos filho resilientes. Cubra o recipiente alinhar-itens propriedade. |
flexionar | Como configurar um elemento caixa de criança elástico espaço alocado. |