Tudo sobre as propriedades flexbox
O conceito por trás das propriedades do Flexbox é fornecer ao contêiner a capacidade de alterar automaticamente a largura, a altura e a ordem de seus itens para melhor preencher o espaço disponível. Isso pode ser realmente útil para acomodar itens em diferentes tamanhos e dispositivos de tela. Os itens são expandidos para preencher qualquer espaço livre ou diminuídos para evitar um estouro.
Grade CSS Flexbox para iniciantes
O CSS é uma das primeiras e mais fáceis coisas a aprender no desenvolvimento e design da Web, mas não confunda sua simplicidade com a falta de recursos. Ele tem vários recursos e capacidades incríveis prontos para serem utilizados, um deles sendo o seu módulo de layout relativamente novo: propriedades do Flexbox.
As propriedades do Flexbox são um dos layouts mais recentes disponíveis para CSS3, e há muito a aprender sobre isso. Aqui, nós trabalhamos com o layout e como usá-lo. Antes de começarmos, porém, aqui está um pouco das propriedades do Flexbox:
O que são modos de layout?
Nos termos mais simples, a grade do CSS Flexbox é um modo de layout. O CSS possui vários modos de layout existentes. O modo de layout do bloco (como display: block) existe há muito tempo. Os layouts de bloco são uma boa opção para estilizar documentos completos. De fato, um navegador da web trata vários elementos, como divs e parágrafos, no nível de bloco, por padrão.
Outro modo de layout comum é o inline. As tags forte, de entrada e de âncora são exemplos de elementos em nível de linha. As ferramentas de desenvolvedor do Google Chrome permitem que você visualize o 'estilo calculado' de um elemento para determinar as propriedades e os valores de CSS que foram aplicados aos elementos não definidos explicitamente pelo desenvolvedor.
O layout relativamente novo das propriedades Flexbox (caixa flexível) foi projetado como um método mais eficiente de organizar, alinhar e distribuir espaço entre os itens do contêiner, mesmo que o tamanho desses itens seja dinâmico ou desconhecido. Daí o termo 'flexível'.
O conceito Flexbox Properties
A coisa mais importante sobre as propriedades do Flexbox é que elas são independentes de direção. Enquanto o layout do bloco é baseado na vertical e o layout embutido na horizontal, o Flexbox também não é. Bloquear e alinhar funcionam bem nas situações certas, mas não têm flexibilidade para oferecer suporte a aplicativos grandes ou complicados, principalmente quando se trata de alterar a orientação, esticar, encolher, redimensionar e alterar as dimensões dos elementos.
Onde as propriedades do Flexbox são usadas?
Como qualquer outro layout CSS, o Flexbox é melhor usado em determinadas situações. Em particular, é apropriado para layouts e componentes de pequena escala de um aplicativo. Para layouts de maior escala, um layout de grade seria a escolha mais sábia.
Por que o Flexbox é preferido?
Muitos desenvolvedores e designers dão preferência às propriedades do Flexbox sempre que podem (às vezes com muita frequência!). Isso ocorre porque as propriedades do Flexbox são mais fáceis de usar; o posicionamento dos elementos é muito mais simples, para que você possa obter layouts mais complexos com menos codificação. Em outras palavras, isso simplifica o processo de desenvolvimento.
Um guia para propriedades Flexbox
Agora que você sabe um pouco sobre as propriedades do Flexbox e como e por que isso funciona, aqui está um guia detalhado do layout. O modelo do layout é composto de um contêiner pai, também chamado de 'contêiner flexível'. Os filhos imediatos desse contêiner são chamados de 'itens flexíveis'.
O layout passou por várias iterações e alterações de sintaxe ao longo dos anos desde que seu primeiro rascunho foi criado em 2009. A especificação mais recente do Flexbox é suportada nos seguintes navegadores da web:
- Opera 17+
- Internet Explorer 11 ou superior
- Mozilla Firefox 28+
- Google Chrome 29 ou superior
- Apple Safari 6.1+
- Android 4.4 ou superior
- iOS 7.1 ou superior
A terminologia usada nas propriedades do Flexbox
Aqui está uma olhada em algumas terminologias básicas usadas no layout de propriedades do Flexbox:
- Exibição: Este comando é usado para definir o contêiner flex. Pode estar embutido ou em bloco, dependendo da opção Também define o conteúdo flexível para todos os itens no contêiner. Exemplo:
.container (
exibição: flex; / * ou inline-flex * /
)
- Ordem: os itens flexíveis são dispostos de acordo com a ordem de origem por padrão, mas a propriedade 'order' pode controlar a ordem em que os itens aparecem no contêiner. Exemplo:
.item (
ordem: ;
)
- Direção flexível: Essa ordem configura o eixo principal, definindo a direção em que os itens flexíveis são colocados no contêiner. Os itens flexíveis podem ser dispostos principalmente nas direções vertical ou horizontal. Exemplo:
.container (
direção flexível: linha | linha inversa | coluna | coluna reversa;
)
- Crescimento flexível: esse pedido define a capacidade do item flexível de aumentar automaticamente a escala, se houver espaço. Pode aceitar um valor sem unidade para servir como uma proporção. Esse valor determina quanto espaço o item deve ocupar no contêiner flex. Por exemplo, se todos os itens tiverem o crescimento flexível definido como 1, o espaço restante no contêiner será igualmente distribuído a todos os filhos. Se o valor for 2, o espaço restante ocupará duas vezes mais espaço que o restante. Exemplo:
.item (
crescimento flexível:; / * padrão 0 * /
)
- Encolhimento flexível: faz exatamente o oposto do crescimento flexível, pois encolhe os itens flexíveis quando necessário. Exemplo:
.item (
contração flexível:; / * padrão 1 * /
)
- Base flexível: essa ordem define um tamanho padrão dos elementos antes da distribuição do restante do espaço. Pode ser um comprimento, como 5rem ou 20%, ou uma palavra-chave. A palavra-chave 'auto' indica que a largura e a altura do item devem ser medidas, e a palavra-chave 'content' indica que o item é dimensionado com base em seu conteúdo. Exemplo:
.item (
base flexível: | auto; / * padrão automático * /
)
- Flex: é um atalho combinado para todas as três propriedades acima: flex-grow, flex-base e flex-shrink. O padrão é '0 1 auto'.
.item (
flex: nenhum | (||)
)
- Justificar conteúdo: esta ordem define o alinhamento do eixo principal e ajuda a distribuir o espaço livre adicional, se houver algum quando os itens forem inflexíveis ou atingirem o tamanho máximo. Isso também ajuda a controlar o alinhamento do item quando há um estouro.
.container (
justificar conteúdo: flex-start | extremidade flexível | centro | espaço entre | espaço ao redor;
)
- Alinhar itens: é usado para definir o comportamento padrão do layout dos itens flexíveis no eixo transversal da linha atual. É essencialmente uma versão do 'conteúdo justificado' no eixo transversal, que é perpendicular ao eixo principal. Exemplo:
.container (
alinhar itens: flex-start | extremidade flexível | centro | linha de base | esticam;
)
- Alinhar conteúdo: esse pedido alinha as linhas do contêiner, caso haja espaço adicional no eixo transversal. É semelhante ao 'justificar conteúdo', mas para o eixo transversal, em vez do eixo principal. Se houver apenas uma linha de itens flexíveis, essa propriedade não terá efeito. Exemplo:
.container (
alinhar conteúdo: flex-start | extremidade flexível | centro | espaço entre | espaço ao redor | esticam;
)
Usando propriedades Flexbox
Para usar o layout do Flexbox, você pode simplesmente definir a propriedade display no elemento pai HTML, como abaixo:
.flex-container (
exibição: -webkit-flex; / * Safari * /
exibição: flex;
)
Se você preferir exibir como um elemento embutido, escreva:
.flex-container (
exibição: -webkit-inline-flex; / * Safari * /
exibição: inline-flex;
)
Você só precisa que essa propriedade seja configurada no container flexível pai e em seus itens flexíveis imediatos. Os filhos do contêiner se tornarão automaticamente itens flexíveis.
Cursos recomendados
- Curso Online sobre jQuery Grátis
- Curso on-line em JS angular gratuito
- Treinamento on-line no Mudbox
- Treinamento de certificação em Free Ruby
Propriedades do Flexbox - propriedades do contêiner Flex
Existem várias maneiras de agrupar propriedades do Flexbox, e a maneira mais fácil de aprender sobre elas é dividindo-as em propriedades de itens e contêineres do Flex. Acabamos de abordar algumas das propriedades dos contêineres flexíveis acima. Vejamos o resto:
-
Direção flexível: linha ou coluna
A propriedade flex-direction pode ser apresentada como colunas verticalmente ou linhas horizontalmente. Com a direção da linha, os itens flexíveis são empilhados da esquerda para a direita por padrão. A inversão de linha altera essa direção para da direita para a esquerda. A direção da coluna é de cima para baixo, por padrão, e a função de reversão da coluna reverte isso para uma direção de baixo para cima.
-
Flex-wrap: nowrap ou wrap
A propriedade flex-wrap controla se os filhos do contêiner flexível são dispostos em linhas múltiplas ou únicas e a direção na qual as novas linhas são empilhadas. O valor nowrap vê os itens flexíveis exibidos em uma única linha, encolhidos para caber na largura do contêiner por padrão. O valor de quebra vê os itens flexíveis exibidos em diferentes linhas na direção da esquerda para a direita ou de cima para baixo. Você pode adicionar reversão automática para alterar a ordem também. O valor padrão é nowrap.
-
Fluxo flexível
Essa propriedade é basicamente um atalho para definir as propriedades flex-direction e flex-wrap juntas. O valor padrão é 'row nowrap'. Exemplo:
.flex-container (
fluxo flexível: ||
)
-
Justificar-conteúdo
A propriedade justify-content possui quatro valores: flex-start para alinhar itens ao lado esquerdo do contêiner; flex-end para alinhar itens para o lado direito; centro para alinhar com o centro; espaço intermediário para alinhar itens com espaçamento igual entre eles, com o primeiro e o último itens alinhados às bordas do contêiner; e espaço para alinhar o item flexível com espaçamento igual ao redor deles, incluindo o primeiro e o último itens. Flex-start é o valor padrão.
-
Alinhar itens
Essa propriedade possui cinco valores: esticar para aumentar a escala de itens flexíveis para preencher toda a largura ou altura, desde o início da cruz até a extremidade do contêiner; flex-start para empilhar itens no início; flex-end para empilhar itens no cross-end; central para alinhar itens ao centro do eixo transversal; e linha de base para alinhar itens para que suas linhas de base estejam alinhadas. Esticar é o valor padrão.
-
Alinhar conteúdo
Essa propriedade alinha as linhas de um contêiner flexível quando houver espaço adicional no eixo transversal. Seus valores são: esticar para distribuir espaço após cada linha; flex-start para empilhar itens para o cross-start; flex-end para empilhar itens na direção do cross-end; central para empilhar itens no centro do eixo transversal; space-around para distribuir igualmente espaço ao redor de itens flexíveis. O valor padrão é esticar.
Propriedades do Flexbox - propriedades do item Flex
Agora que você conhece as propriedades do contêiner Flexbox, vejamos as propriedades do item:
- Ordem
Essa propriedade controla a ordem de aparência dos filhos do contêiner flexível. Eles são pedidos no contêiner flex por padrão.
.flex-item (
ordem: ;
)
Você pode reordenar itens flexíveis sem precisar reestruturar o código HTML. O valor padrão é zero.
- Alinhar-se
Essa propriedade permite que o alinhamento padrão de um item flexível específico seja substituído. Você pode usar os valores de itens de alinhamento para esta propriedade.
.flex-item (
alinhar-se: auto | início flexível | extremidade flexível | centro | linha de base | esticam;
)
O valor automático em align-self é calculado pelo valor dos itens de alinhamento no elemento pai. Se o elemento não tiver pai, o alongamento será usado.
Exemplos básicos
É tudo o que você precisa saber para usar o layout de grade do CSS Flexbox. Agora é hora de praticar o que você aprendeu. Aqui estão alguns exemplos que mostram como todas essas propriedades se reúnem. Vamos começar com algo absolutamente simples:
.parent (
exibição: flex;
altura: 300 px;
)
.criança (
largura: 100px;
altura: 100px;
margem: auto;
)
Este é um exemplo de centralização perfeita. Os valores de altura e largura podem ser alterados conforme desejado. A chave aqui é definir a margem como 'auto', para que o contêiner flex absorva automaticamente qualquer espaço extra. Simples o suficiente!
Agora, vamos adicionar mais algumas propriedades: uma lista com seis itens de dimensões fixas que podem ser dimensionáveis automaticamente. Eles devem ser distribuídos uniformemente no eixo horizontal.
.flex-container (
exibição: flex;
justificar conteúdo: espaço ao redor;
)
Em seguida, vamos tentar centralizar uma navegação alinhada à direita para telas de tamanho médio e torná-la com uma coluna em dispositivos pequenos.
/* Ampla */
.navigation (
exibição: flex;
fluxo flexível: quebra de linha;
justificar conteúdo: flex-end;
)
/ * Telas médias * /
@media all e (largura máxima: 800 px) (
.navigation (
justificar conteúdo: espaço ao redor;
)
)
/ * Telas pequenas * /
@media all e (largura máxima: 500 px) (
.navigation (
direção flexível: coluna;
)
)
Hora de dar um passo adiante! Vamos tentar um layout para dispositivos móveis com três colunas, com rodapé e cabeçalho de largura total e independente da ordem de origem.
.embrulho (
exibição: flex;
fluxo flexível: quebra de linha;
)
/ * Dizemos que todos os itens têm 100% de largura * /
.header, .main, .nav, .aside, .footer (
flex: 1 100%;
)
/ * Contamos com o pedido da fonte para a abordagem móvel primeiro * /
/ * Telas médias * /
@media all e (largura mínima: 600 px) (
.aside (flex: 1 automático; )
)
/ * Telas grandes * /
@media all e (largura mínima: 800 px) (
.main (flex: 2 0 px; )
.aside-1 (order: 1; )
.main (ordem: 2; )
.aside-2 (ordem: 3; )
.footer (ordem: 4; )
)
Conclusão
Estes são apenas alguns exemplos básicos. Você pode brincar muito mais com os layouts de grade do CSS Flexbox, e eles são absolutamente inestimáveis se você deseja criar uma página da web responsiva.
Artigos recomendados
Então, aqui estão alguns artigos que ajudarão a obter mais detalhes sobre as propriedades do flexbox, o código do flexbox e também sobre a grade do css flexbox. Basta acessar o link fornecido abaixo.
- HTML vs XML - Principais diferenças
- CSS3 vs CSS - Como são diferentes? (Infograph)
- Principais diferenças entre HTML e CSS
- HTML5 vs Flash