Flexbox CSS explicado em 8 minutos, mais uma folha de cola do Flexbox

Quando eu era novo no CSS Flexbox, li muitos artigos e assisti muitos vídeos. Mas a maioria deles era longa e eu não tinha tempo para ler ou ver todos. tanto para fazer, tão pouco tempo.

Então, decidi escrever este artigo no Flexbox em 8 minutos. Eu também vou compartilhar um link para uma folha de dicas do Flexbox que eu achei muito útil. Isso ajudará você a aprender o Flexbox enquanto projeta para a Web moderna.

Antes de começar, é importante que você esteja familiarizado com HTML e CSS básicos. Também seria útil conhecer um framework CSS como o Bootstrap. Isso ajudaria você a aproveitar ao máximo este tutorial.

O Flexbox é um conceito bastante novo em CSS. Ele resolve muitos problemas de web design como o Layout do Santo Graal . Outra área em que o Flexbox ajuda é anexar e preceder elementos a outros elementos.

É assim que a Wikipedia define o Flexbox:

CSS Flex Box Layout é um modelo de layout web CSS3 . Ele está no estágio de Recomendação de Candidatos (CR) do W3C . O layout flex permite que elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).

Aqui estão as definições –

  1. CSS3 – a última versão do CSS.
  2. W3C – World Wide Web Consortium, uma organização que desenvolve padrões abertos para a Web.
  3. Elementos responsivos : ao diminuir o tamanho do navegador ou exibi-los em tablets e dispositivos móveis, os elementos responsivos mudam sua visualização como abaixo.

web design responsivo

Se você já usou frameworks CSS como Foundation ou Bootstrap, você sabe que pode ser um desafio criar uma página web responsiva. Com o Flexbox é super simples.

FlexBox em ação

Vamos começar isso.

Abra seu editor de texto e trabalhe comigo. Essa é a melhor maneira de aprender.

Passo 1 – Crie uma pasta para o seu novo projeto. Em seguida, crie um arquivo chamado index.html e insira o código mostrado abaixo. (Há apenas 1 passo).

 <! DOCTYPE html> 
<html lang = "en">
<cabeça>
<meta charset = "UTF-8">
<title> CSS Flexbox em 8 minutos </ title>
<style>
ul {
exibição: flex;
flex-direction: linha;
borda: 1px vermelho sólido;
background-color: skyblue;
}
li {
estilo de lista: nenhum;
largura: 100 px;
altura: 100 px;
background-color: # ff00ff;
margem: 10px;
}
</ style>
</ head>
<body>
<ul>
<li> 1 </ li>
<li> 2 </ li>
<li> 3 </ li>
</ ul>
</ body>
</ html>

Não pense muito sobre isso agora, já que explicarei tudo em apenas um minuto.

Quando você abrir o arquivo em seu navegador, será algo como isto.

exibição: flex; propriedade faz o fluxo na linha em vez da coluna.

Observe que no nosso CSS adicionamos display: flex . Isso muda nossa lista de agir como um simples elemento de nível de bloco em um Flexbox. Certifique-se de definir isso no elemento pai, que neste caso é <ul> . É isso que cria o contêiner flexível.

Depois que o elemento pai é definido como o contêiner flexível, ele manipula os elementos filhos, portanto, você não precisa fazer isso.

Observe também que adicionamos a linha flex-direction: row na mesma seção <ul> . O Flexbox é padronizado para um layout de linha. Mas um recurso que o torna tão poderoso é que você pode mudar a direção alterando a propriedade.

Vamos aprender mais sobre isso.

Eixo Flex

Lembre-se do sistema de coordenadas que você aprendeu na aula de matemática? Ele tinha um eixo X e Y que nunca mudou de direção.

O eixo flexível é similar, mas os eixos não permanecem rígidos. Os eixos principal e transversal mudam dependendo do fluxo do item flexível. Falaremos mais sobre isso mais tarde, mas, por enquanto, lembre-se de que o eixo principal segue o fluxo.

Se flex-direction:row , então os eixos são os seguintes:

Eixo principal e Eixo cruzado no padrão ou na direção do flexão é Linha.

e se mudarmos para flex-direction:column os eixos mudam para isso:

Eixo principal e eixo cruzado invertido na direção do flexão: coluna; propriedade

Propriedades do Contêiner Flex

Flex Direction – Isto é muito fácil de entender. A direção do flex pode ser row ou column . No entanto, você pode inverter a ordem dos elementos em qualquer um deles. Tudo o que você precisa fazer é alterar o valor da propriedade.

flex-direction pode ser column || row || column-reverse || row-reverse

Vamos ver alguns exemplos.

 flex-direction: linha; 

flex-direction: linha;

 flex-direction: reversão de linha; 

flex-direction: reversão de linha;

 flex-direction: coluna; 

flex-direction: coluna;

 flex-direction: reverso da coluna; 

flex-direction: reverso da coluna;

Flex Wrap – Se o contêiner do Flexbox tiver itens que não couberem no espaço disponível, eles encolherão até ficarem. Se houver muitos itens, eles podem quebrar o layout transbordando o contêiner. Você pode resolver isso usando a propriedade flex-wrap .

O valor padrão da propriedade flex-wrap é nowrap . Isso coloca os elementos em uma única linha. Como mencionado acima, isso nem sempre é ideal. Alterar o valor para wrap colocará os elementos em várias linhas. É como quando você quebra o texto em várias linhas no bloco de notas.

flex-wrap pode ser wrap || nowrap || wrap-reverse

Veja como isso funciona.

 envoltório flex: nowrap; // ou não escreva isso, esse valor é padrão 

envoltório flex: nowrap;

 envoltório flex: wrap; // envolve os itens flexíveis na segunda linha 

envoltório flex: wrap;

 Flex-wrap: wrap-reverso; // quebra os itens na direção inversa. 

Flex-wrap: wrap-reverso; – Eu incluí números para este exemplo.

Flex Flow – é uma propriedade combinada para flex-direction e flex-wrap . É uma sintaxe abreviada para facilitar as coisas.

 flex-flow: envoltório de coluna; 

flex-flow é igual a escrever flex-direction:column e flex-wrap:wrap . Produz o resultado de ambos.

é equivalente a escrever propriedades flex-direction como colunas e flex-wrap como wrap; nós especificamos alguma altura aqui.

Justifique o conteúdo – é como a justificação incluída na maioria dos editores de texto. Com o flexbox, justificamos os itens flexíveis no eixo principal.

 justificar-conteúdo: flex-start || flex-end || centro || espaço ao redor || espaço entre; // configure para qualquer coisa 

todas as propriedades de conteúdo justificam, produz esses resultados.

Alinhar itens – A propriedade de align-items de um contêiner flexível é semelhante a justify-content mas funciona no eixo cruzado.

 itens de alinhamento: alongamento || flex-start || flex-end || centro || linha de base; // configure para qualquer coisa 

propriedades de itens de alinhamento.

Alinhar conteúdo – Se você tiver usado a propriedade flex-wrap:wrap no contêiner, poderá usar o align-content para alinhar os itens.

 alinhar conteúdo: esticar || flex-start || flex-end || Centro; // configure para qualquer coisa 

alinhe as propriedades de conteúdo.

Propriedades do item flexível

Ordem – Se você quiser alterar a posição de um item flexível sem alterar seu HTML DOM, use a propriedade order .

Você pode alterar a ordem de qualquer elemento com um número positivo ou negativo.

O número de ordem padrão para todos os itens flexíveis é 0. Alterar o valor do pedido para um número positivo move o elemento flexível mais tarde no visor. Alterar o valor do pedido para um número negativo move o elemento flexível anteriormente na exibição. Elementos flex com o mesmo número de pedido mantêm a mesma ordem que eles tinham na origem.

Aqui estão alguns exemplos. Observe que cada exemplo começa na ordem de classificação original mostrada abaixo.

 ordem: -1 || 0 || 1 || 2; // configure para qualquer coisa (o padrão é 0) 

Flex propriedade ordem de item, maior a ordem, o último o elemento aparecer.

Como você pode ver, podemos alterar a posição do item Flex sem alterar o código HTML.

Novamente, o número de ordem padrão para qualquer elemento é 0. O elemento ordenado mais baixo ocorre primeiro. O elemento mais alto ordenado ocorre por último. Mas você não pode usar uma ordem negativa no primeiro elemento. Revise os exemplos acima para ver como isso funciona.

Flex Grow – Aqui vem uma das propriedades mais importantes do Flexbox.

Lembre-se de que o contêiner do Flexbox controla como os itens flexíveis preenchem o espaço disponível. Se houver muitos itens flexíveis, eles encolherão. Mas e se houver mais espaço sobrando? O valor flex-grow é o fator de crescimento de um item flexível em relação aos outros itens.

Aqui está um exemplo.

flex-grow:0||1;

o comutador flex-grow está aqui, o padrão está desativado.

Quando usamos o switch flex-grow o item flexível ocupa todo o espaço disponível.

Flex Shrink – Se você quiser reduzir os elementos com base em uma porta de visualização, como um tablet ou telefone celular, use flex-shrink .

flex-shrink:1;

É como flex-grow mas na direção oposta.

Flex Basis – Se você quiser definir o tamanho inicial de um elemento flex, use flex-basis .

flex-basis:auto||n px;

n pode ser o tamanho definido para qualquer elemento flexível e você pode configurá-lo para acomodar o texto.

Aqui está um exemplo.

A propriedade de base flexível pode ser definida para resposiveness de elemento

The Shorthand Flex

Não pense que o Flexbox é muito complicado. Você pode defini-lo com 4 a 8 linhas de código.

Aqui está a abreviação para definir as propriedades do item flexível. Aprenda o acrônimo GSB, para G row, S hrink e B asis.

As propriedades flex-grow , flex-shrink e flex-basis podem ser definidas em uma linha de código.

flex: 0 0 150px;

ou

flex: 0 1 auto;

Aqui estão alguns exemplos.

Exemplo 1: usando Flex para dividir seções

 <ul> 
<li> 1 </ li>
<li> 2 </ li>
</ ul>
<style>
ul {
exibição: flex;
borda: 1px vermelho sólido;
cor de fundo: rgb (222, 222, 221);
preenchimento: 0px;
}
li {
estilo de lista: nenhum;
largura: 100 px;
altura: 100 px;
cor de fundo: amarelo;
margem: 10px;
}
 li: n-filho (1) { 
flex: 0 1 25%;
}
 li: n-filho (2) { 
flex: 1 1 75%;
}
</ style>

Flexibilidade para dividir.

isso divide o contêiner flexível em 25% e 75%.

Exemplo 2 A taxa de taquigrafia

 <ul> 
<li> 1 </ li>
<li> 2 </ li>
</ ul>
<style>
ul {
exibição: flex;
borda: 1px vermelho sólido;
cor de fundo: rgb (222, 222, 221);
preenchimento: 0px;
}
li {
estilo de lista: nenhum;
largura: 100 px;
altura: 100 px;
cor de fundo: amarelo;
margem: 10px;
}
 li: n-filho (1) { 
flex: 1;
}
 li: n-filho (2) { 
flex: 5;
}
</ style>

isso dividirá o contêiner flexível em 1/1 + 5 = 1/6 e 5/1 + 5 = 5/6.

flex shorthand for ratio.

O último alinhamento

A última propriedade de alinhamento que discutiremos é align-self . Pode ser aplicado a itens flexíveis individuais para que possam ser alinhados de acordo com o eixo transversal.

 auto-alinhamento: auto || flex-start || flex-end || centro || linha de base || esticam ; 

Propriedade auto-alinhável aplicada em itens individuais

Material de referência do FlexBox (incluindo folha de cola)

  1. FlexBox no MDN (Mozilla Developer Network)
  2. Resolvido pelo Flexbox por phillip walton
  3. A Cheatsheet da FlexBox.
  4. Flexbox Froggy – um jogo Flexbox para aprender o Flexbox interativamente.

Eu sou um escritor médio crescente, eu escrevo em Web e Motivação, você pode me ajudar batendo palmas ? botão abaixo tanto quanto você quer e por favor, siga minha publicação sobre motivação aqui.

Motivar Bot
criatividade é como filosofia, todos podem fazer isso. medium.com

Se você tiver alguma dúvida, pode comentar abaixo ou entrar em contato comigo no Twitter.

motivatebot (@themotivatorbot) | Twitter
Os últimos Tweets de motivatebot (@themotivatorbot) www.twitter.com

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *