O melhor tutorial Box flexível CSS3 em 2024. Neste tutorial você pode aprender Suporte a navegadores,Conteúdo da embalagem flexível CSS3,flex-direção,atributo justificar-content,alinham-itens de propriedade,propriedade flex-envoltório,atributo alinhar-content,atributos flexíveis sub-elemento,mais exemplos,Propriedades da caixa flexíveis 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.
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 |
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-direction
ordem especifica o sub-elemento elástico no recipiente pai.
flex-direction: row | row-reverse | column | column-reverse
flex-direction
valores são:
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:
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:
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.
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.
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).
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.
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:
align-items
estabelecidos ou recuperar o elemento elástico sobre o lado da caixa de eixo (eixo vertical) em direcção de alinhamento.
align-items: flex-start | flex-end | center | baseline | stretch
Cada análise de valor:
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:
atributoflex-envoltório é usado para especificar um modo elemento envoltório elástico caixa de criança.
flex-flow: ||
Cada análise de valor:
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:
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.
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 ':
order:
Cada análise de valor:
order
para definir as propriedades dentro das propriedades elásticas dos elementos filho recipiente elásticas:
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:
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:
align-self
atributo é usado para definir a direcção de alinhamento do próprio elemento elástico sobre o lado do eixo (eixo vertical).
align-self: auto | flex-start | flex-end | center | baseline | stretch
Cada análise de valor:
O exemplo que se segue demonstra os sub-elementos elásticos alinhar-auto efeito da aplicação de valores diferentes:
flex
atributo é usado para especificar a forma de alocar espaço para os sub-elementos elásticos.
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Cada análise de valor:
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:
Criar uma página que responde usando uma caixa elástica
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. |