até relativamente pouco, poderíamos até dizer “ainda” se o seu desenvolvimento requer alta compatibilidade em versões antigas de navegadores, módulos personalizáveis de maquette para sites como listagens de linhas de N blocos, foi criando uma longa lista de estilos CSS que mudaram de acordo com a resolução dos diferentes dispositivos. Às vezes “flutuamos” os elementos e os vimos com as margens laterais, em outros que aplicamos “bloco inline” e nós Utilizou alguma técnica estranha para não ter a separação que foi criada entre camadas por magia, adicionamos uma camada vazia no final da lista para justificar o todo e um longo etcetera de desvantagens que o Flexbox vem para resolver.
o que é flexbox e como ele é usado.
flexbox vem de “layout de caixa flexível”, que pode ser traduzido como “design de caixa flexível” e nos dá uma solução magnífica para Todos os nossos desenvolvimentos “responsivos”. O que nos permite criar um conjunto de elementos flexíveis que se adaptem automaticamente ao seu contêiner e com os quais podemos controlar parâmetros como alinhamento, direção (horizontal / vertical), ajuste da linha de acordo com os tamanhos e muitas possibilidades que vamos Presente neste artigo.
Em termos de compatibilidade, o Flexbox é compatível atualmente com os mais importantes navegadores da web e diferentes versões, embora em alguns devemos usar prefixos CSS para o seu funcionamento adequado (ver em Caniuse .com ). Se você tiver problemas com algumas versões antigas, você pode tentar usar “autoprefixer”. En los siguientes ejemplos utilizaremos el código css tal cual, sin añadidos, así que espero que vuestro navegador esté actualizado.
La última definición conocida sobre Flexbox del W3C es del 26 de Mayo de 2016 en el momento de escribir este artigo. No link, podemos ver sua definição e exemplos diferentes de uso. Como indicado na introdução, até agora sabíamos quatro maneiras de organizar os elementos, três apresentação (com variações alternativas) e outra posição:
- – elementos on-line (display: inline)
- – elementos no bloco (display: bloco)
- – elementos na tabela (display: tabela)
- – tipos de posição (posição: absoluto / parente / fixo)
flexbox é uma mistura de todos eles sobre como afeta o arranjo de uma estrutura de elementos contidos em uma camada pai ou contêiner e é definido como “flex” na propriedade “Display” (Display: Flex). Podemos criar uma estrutura de elementos on-line semelhante a uma tabela ou fazê-los funcionar como um bloco e em ordem inversa na seguinte resolução, tudo o que ele automaticamente se adapta ao tamanho que precisamos, tanto em largura e altura. Sim, também de altura! 😉
O W3C define essa estrutura como um “fluxo flexível” de elementos na direção (para cima / para baixo / esquerda / direita) e tamanho (largura / altura) de acordo com os eixos transversais principais (horizontais) e transversais (vertical).
como se para aprofundar sua definição, eu adicionei você no link W3C, nós iremos diretamente para ver exemplos operando.
exemplos de layout usando flexbox.
IMPORTANTE: Se você não exibir os seguintes exemplos corretamente, é mais provável que seu navegador não seja compatível com este Propriedade CSS. Por favor, tente atualizá-lo ou visualizá-lo em outro navegador antes de aumentar o autor. 😛
Para poder experimentar todas as possibilidades oferecidas pelo Flexbox CSS, vamos criar um recipiente classe = ” camada que fará pai e sete camadas de classe = “elemento” numerado. E por que sete? Para os exemplos é bom para nós ser um número ímpar para ver a ordenação e a adaptação Turus e seu resultado, e sete também para ver uma lista de elementos não muito curtos, embora você possa tentar colocar qualquer número de itens.
html:
<div class=”contenedor”> <div class="elemento">1</div> <div class="elemento">2</div> <div class="elemento">3</div> <div class="elemento">4</div> <div class="elemento">5</div> <div class="elemento">6</div> <div class="elemento">7</div></div>
Além dos estilos de design definidos para a exibição dos exemplos, vamos iniciar um tamanho de largura de 25% para os elementos em relação ao contêiner pai. Para começar a usar o Flexbox, adicionamos a propriedade “Display: Flex” ao contêiner
css exemplo 1:
.contenedor{ display:flex;}.elemento{ width:25%;}
Exemplo 1:
Como vemos, não tendo definido o comportamento da direção e do tamanho que os elementos do nosso contêiner terão, embora tenhamos definido uma largura de elementos de 25%, eles se adaptam ao pai ocupando 100% de largura entre a soma de todos . Por padrão, tem esse comportamento “flexível” como indica seu nome. Mas a Flexbox é muito mais.
flex-direção:
Veremos a propriedade “Flex-Direction”, que pode levar 4 valores e aplica-se ao pai:
- – Flex-Direção: linha; – > Os itens são exibidos da esquerda para a direita (valor padrão, semelhante ao Exemplo 1)
- – Flex-DIREÇÃO: ROW-REVERSE; – > Os elementos são exibidos da direita para a esquerda.
- – Flex-Direction: coluna; – > Os elementos são exibidos de cima para baixo.
- – Direção Flex: coluna – inversa; – > Os itens são exibidos a partir da parte inferior para cima.
css exemplo 2:
.contenedor{ display:flex; flex-direction:row-reverse;}
Exemplo 2:
Os elementos investem sua ordem de exibição da direita para a esquerda, sem levar em conta a ordem do layout.
css exemplo 3 :
.contenedor{ display:flex; flex-direction:column;}
Exemplo 3:
Os elementos são exibidos formando uma coluna de cima para baixo. Nesse caso, como os elementos medem 25% do contêiner, sua largura Sim, que leva o valor indicado. Se eliminarmos a largura, as camadas se ajustarão ao tamanho do contêiner, ocupando 100% de largura.
css Exemplo 4:
.contenedor{ display:flex; flex-direction:column-reverse;}
Exemplo 4:
Os elementos são exibidos formando uma coluna de baixo para cima, sem levar em conta a ordem do layout. A largura funciona de forma semelhante ao exemplo 3.
flex-wrap:
Vamos ver a propriedade “Flex-Wrap”, cujo valor afeta como os elementos são distribuídos em uma linha e, consequentemente, , a um tamanho. Valores possíveis são:
- – flex-wrap: Nowrap; – > Os elementos são exibidos on-line, em uma única linha, e seu tamanho é ajustado ao contêiner, desde que a soma de todos eles seja maior que 100% da largura de o recipiente. Se for menor, eles ainda estão mostrando online, mas mantêm seu tamanho. Este é o valor padrão e, como vimos no Exemplo 1, embora a largura dos elementos seja de 25% do recipiente, todos são mostrados na linha modificando seu tamanho para que a soma total não seja superior a 100% de seu contêiner. .
- – Flex-Wrap: Wrap; – > Os itens são exibidos on-line, mas se a sua largura exceder a do contêiner, elas são distribuídas em várias linhas.
- – Flex-Wrap: Wrap Inverter; – > Os elementos são exibidos on-line, mas se a largura exceder a do contêiner, elas são distribuídas em várias linhas, e elas também o fazem em ordem inversa a de layout.
css exemplo 5:
.contenedor{ display:flex; flex-wrap:wrap;}
Exemplo 5:
Como nós comentamos no Valores da propriedade, neste caso, os elementos são exibidos on-line, mas como recebemos um valor de largura de 25% do recipiente para os elementos, quando a linha terminar os elementos continuam em outro, e assim por diante.
css Exemplo 6:
Exemplo 6:
Este exemplo de gerenciamento de flexbox é muito curioso, como Bem, para fazer a adaptação de tamanhos por linhas como no caso anterior, ele executa sua ordem encomendada, de baixo para cima, e neste caso da esquerda para a direita (que é o sentido padrão).
Nós pode modificar o sentido de orientação horizontal se também usarmos “f Lex-DIREÇÃO: ROW-REVERSE “Como podemos ver no seguinte exemplo:
css Exemplo 7:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap-reverse;}
Exemplo 7:
flex-flow:
Essas mesmas propriedades podem especificá-las em um único por meio de “Flex-Flow” da seguinte maneira:
FLOW-FLOW: < flex-direção > < flex-wrap >
Assim, o código anterior pode ser o seguinte:
css:
.contenedor{ display:flex; flex-flow:row-reverse wrap-reverse;}
Conteúdo de Justificação:
Quanto ao alinhamento horizontal dos elementos no Flexbox, encontramos a propriedade “Justifo-Conteúdo”, que alinha os elementos ao longo do eixo principal (eixo principal) do seu contêiner, Mas, ao contrário do alinhamento de um texto, na Flexbox, você também deve levar em conta a direção dos elementos. Vamos ver isso mais claramente com os exemplos a seguir após a definição de seus valores mais comumente usados:
- – Conteúdo da justificação: Flex-Start; – > Alinhe os elementos horizontalmente desde o início do endereço principal do eixo do seu contêiner (a partir do início da linha). Este é o valor padrão. É importante notar que, como veremos mais tarde, o endereço estabelecido em “flex-direção” afeta o alinhamento.
- – Conteúdo de justify: flex-end; – > Alinhe os elementos horizontalmente a partir do final do endereço do eixo principal do seu contêiner (a partir do final da linha)
- – Conteúdo da Justificação: Center ; – > Alinhe os elementos ao centro do eixo principal do seu contêiner. Semelhante a um texto alinhado ao centro.
- – Conteúdo da justificação: espaço-entre; – > Alinhe os elementos que justificam ao longo do eixo principal do seu contêiner. Semelhante a um texto justificado. Os elementos laterais estão presos nas extremidades e o resto são distribuídos ao longo do eixo principal, deixando o mesmo espaço entre eles.
- – Conteúdo da justificação: espaço-ao redor; – > Alinhe os elementos distribuindo seus centros horizontalmente ao longo do eixo principal de seu contêiner, deixando o mesmo espaço lateral de separação no início, no final e entre eles.
Esta propriedade é melhor compreendida é por um exemplo, pois se tentarmos “justificar-conteúdo: flex-start” com o restante de propriedades padrão, obteremos um resultado semelhante ao alinhamento de um texto em a esquerda? Mas e se o endereço for inverso? Neste caso, obteríamos que o alinhamento estaria à direita, já que o Flexbox leva em conta para o alinhamento dos elementos é o início da direção do eixo (se Primer ou transversal -, como veremos mais tarde).
CSS Exemplo 8:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;}
Exemplo 8:
Neste caso, vemos que o alinhamento dos elementos é à esquerda do seu contêiner. Agora vamos investir a direção da mesma mediante E “Flex-Direction: Row-Reverse” e veremos o que acontece:
css Exemplo 9:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:flex-start;}
Exemplo 9:
Vemos que, neste caso, os elementos estão alinhados à direita. Você pode pensar que “Conteúdo da Justificação: Flex-Start” não está fazendo nada, já que nos exemplos 1 e 2 já obtivemos esses resultados sem a necessidade dessa propriedade, mas … E se quisermos o endereço dos elementos REVERSO, mas estão alinhados à esquerda? Se alterarmos a propriedade para “justificar-conteúdo: flex-end”, obtemos esse resultado, verificando que realmente funciona:
CSS exemplo 10:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:flex-end;}
Exemplo 10:
abaixo, vamos verificar através de exemplos Os valores de alinhamento horizontal que já vimos, fazendo modificações na largura de os elementos para que seus efeitos possam ser melhor compreendidos. Primeiro um alinhamento para o centro:
css exemplo 11:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}.elemento{ width:21%;}
Exemplo 11:
Agora vamos ver um alinhamento “justificado”. A separação entre a linha superior e inferior é diferente devido ao número de elementos entre eles:
CSS Exemplo 12:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}.elemento{ width:21%;}
Exemplo 12:
e agora um alinhamento distribuindo seus centros horizontais. Neste caso, podemos ver que uma espécie de” margens laterais semelhantes “é criada entre o elementos (e entre linhas, dependendo do número de elementos que existem em cada um deles).
css Exemplo 13:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around;}.elemento{ width:21%;}
Exemplo 13:
align-itens | alinhar-si | Alinhamento de alinhamento:
O alinhamento vertical é feito através do chamado “transversal” (eixo cruzado) e, para isso, temos três propriedades diferentes, “alinhados”, “alinhamento” e “alinhamento”. Aqui vem a bagunça, já que se o conceito não for compreendido, os resultados inesperados são frequentemente obtidos. Vamos ver o que o W3C nos informa sobre essas propriedades:
- – “alinhar-itens” Define o alinhamento padrão para todos os elementos do contêiner, incluindo elementos independentes.
- – “Alinhar-self” permite alinhar elementos independentes do recipiente.
- – “Alinhe-Conteúdo” Alinha as linhas / linhas de elementos de um contêiner.
Portanto, “alinhar-itens” serve para alinhar os elementos e “alinhar-conteúdo” para alinhar as linhas destes, enquanto “alinhar-self” nos permite alinhar elementos de forma independente. Sabendo disso, podemos deduzir que “Alinhe-Conteúdo” funciona apenas quando temos mais de uma linha de elementos. A imagem superior representa muito bem como essas propriedades funcionam. Em seguida, veremos os valores que cada um deles pode levar ( Os valores de “alinhados” são válidos para “alinhar-self”):
- – alinhados: alongamento; – > Valor padrão. A altura dos elementos é ajustada ao tamanho do contêiner (ou linha), dividindo o espaço sobrando todos os elementos igualmente.
css exemplo 14:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch;}.elemento{ width:21%;}
Exemplo 14:
- – Align-Itens: Flex-Start; – > Alinha os elementos desde o início da direção do eixo transversal do seu contêiner (assim como ocorreu na horizontal). Também afeta o valor de “flex-direção” à direção do alinhamento vertical.
CSS Exemplo 15:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:flex-start;}.elemento{ width:21%;}
Exemplo 15:
- – alinhar-item: flex-end; – > Alinha verticais os elementos do final do final do final do final do final do final do endereço do eixo transversal do seu contêiner (assim como ocorreu na horizontal).
css exemplo 16:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:flex-end;}.elemento{ width:21%;}
Exemplo 16:
- – alinhar-artigos: centro; – > Alinhe o centro vertical dos elementos ao longo do eixo transversal do seu contêiner .
css exemplo 17:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:center;}.elemento{ width:21%;}
Exemplo 17:
- – Alinhar-artigos: linha de base; – > Alinha verticais as “linhas base” dos elementos ao longo do eixo transversal do seu contêiner. Para entender este exemplo, adicionaremos alguns estilos diferentes aos elementos:
css exemplo 18:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:baseline;}.elemento{ width:21%; line-height:2rem;}.elemento:first-child{ line-height:4rem;}.elemento:nth-child(3){ font-size:1rem; line-height:1.2rem;}.elemento:nth-child(6){ font-size:3rem; line-height:5rem;}.elemento:last-child{ line-height:3rem;}
Exemplo 18:
Como podemos observar, o que está alinhado na vertical é a linha de base do conteúdo de cada elemento, neste caso, a linha de base de cada número, embora entre eles tenham alturas de diferentes linhas ou tamanhos.
Nós fomos ver a descrição para os valores de propriedade “Align-Content”:
- – Alinhe-conteúdo: Stretch; – > Valor padrão. A altura das linhas está em conformidade com o tamanho do contêiner, dividindo o espaço em excesso entre todas as linhas igualmente.
CSS Exemplo 19:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:stretch;}.elemento{ width:21%;}
19:
- – Alinhar-conteúdo: flex-start; – > Alinha as linhas na vertical a partir do início do endereço do eixo transversal do seu contêiner.
css Exemplo 20:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:flex-start;}.elemento{ width:21%;}
Exemplo 20:
- – Align-content: flex-end; – > Alinhe as linhas na vertical do final da direção do eixo transversal do seu contêiner.
CSS exemplo 21:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:flex-end;}.elemento{ width:21%;}
Exemplo 21:
- – Align-teor: centro; – > Alinha as linhas ao longo do eixo transversal do seu contêiner.
css Exemplo 22:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:center;}.elemento{ width:21%;}
Exemplo 22:
- – Align-teor: espaço-entre; – > Alinhe as fileiras que justificam-lhes ao longo do eixo transversal do seu contêiner. Semelhante a um texto justificado vertical. As linhas superiores e inferiores ficam em suas extremidades e o resto são distribuídos ao longo do eixo transversal, deixando o mesmo espaço entre eles.
css exemplo 23:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:space-between;}.elemento{ width:21%;}
Exemplo 23:
- – Alinhe conteúdo: espaço-ao redor; – > Alinhe as linhas que distribuem seus centros verticalmente ao longo do eixo transversal do contêiner, deixando o mesmo espaço vertical de separação na parte superior, inferior e entre eles.
css exemplo 24:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:space-around;}.elemento{ width:21%;}
Exemplo 24:
as propriedades mais curiosas e interessante do flexbox.
Até agora vimos propriedades que influenciam a direção, o alinhamento e o tamanho dos elementos e linhas (e, embora não tenhamos inserido em detalhes, colunas) de um contêiner Flexbox. Mas então vamos ver propriedades impressionantes, já que com eles podemos modificar elementos de forma independente, aumentando as possibilidades de apresentação de sites e interfaces.
ordem:
entre essas propriedades é encontrada “ordem” e, como conseguimos verificar com flexbox, não nos importamos com a ordem de layout dos nossos elementos, e podemos alterar essa ordem com apenas uma instrução. Que levanta a mão que não pagou por ter essa propriedade e esquecer jquery wrap / desembrulhar 😉
- – ordem: – > posição um elemento no Ordem atribuída pelo inteiro especificado na propriedade, levando em conta o valor atribuído ao restante dos elementos, cujo valor padrão é 0 (zero). Isso significa que, a menos que um pedido seja especificado para todos os elementos, qualquer número aplicado a um único elemento levá-lo à última posição. Isso ocorre porque, por padrão, todos eles têm “zero”, por isso, se atribuirmos, por exemplo, “ordem: 3” a qualquer elemento, ele será colocado no final da lista. Mais do que uma ordem, poderíamos chamá-lo de um “valor de posição de ordenação”.O exemplo a seguir pode ser usado para entender melhor esta propriedade:
css Exemplo 25:
.contenedor{ display:flex;}.elemento:nth-child(even){ order:1;}
Exemplo 25:
Com este exemplo, podemos entender melhor a operação desta propriedade, e é que estamos atribuindo a ordem / posição “1” a todos os pares, que estão localizados após os elementos ímpares, o que ser padrão o valor “0”.
flex:
Em seguida, veremos a propriedade “Flex” que é aplicada aos elementos do contêiner e que por sua vez é estruturada de três Propriedades diferentes e que podem ser apresentadas separadamente, “Flex-Crescer”, “Flex-Shrink” e “Flex-Base”, e é definido da seguinte forma:
- – flex: nenhum | < Flex-crescer > < flex-shrink > < flex-base >
veremos as propriedades separadamente: / p>
- – Flex-crescer: < Número >; – > determina o fator de tamanho de um ou vários elementos em relação ao resto levando em conta o espaço “vazio” ou “livre” entre eles. Como um espaço “vazio / livre”, nos referimos ao espaço que não ocupam os elementos em relação à sua linha. Quando esse valor é omitido, ele é definido como 1.
- – flex-shrink: < Número >; – > determina o tamanho diminui o fator de um ou mais elementos em relação a O resto levando em conta o espaço “vazio” ou “livre” entre eles. Quando esse valor é omitido, ele é definido como 1.
- – Flex-Base: Auto | 0 | < largura > – > Especifica o tamanho principal inicial dos elementos que tendo em conta o” vazio “ou espaço “livre” entre eles. Quando este valor é omitido, ele é definido como 0. Essa propriedade torna dependendo do valor atribuído, o tamanho “base” é interpretado como “todo espaço” do elemento ou como o “espaço em excesso” “disso. Em seguida, vemos um gráfico quando explica visualmente como esses valores são interpretados em relação ao tamanho do elemento.
Esta propriedade “Flex” pode operar de maneiras diferentes, dependendo do valor que definimos e não podemos apresentar todos os exemplos possíveis que podem ocorrer. A melhor coisa neste caso é que você tente diretamente para modificar seus valores com um layout básico e, portanto, observar seu comportamento. Nós oferecemos-lhe um ponto de partida como o próximo exemplo com o qual você pode começar a jogar com o inspetor de conteúdo do seu navegador:
CSS Exemplo 26:
.contenedor{ display:flex;}.elemento{ flex:1 1 0;}.elemento:nth-child(4){ flex-grow:3;}
Exemplo 26:
flexbox. A solução ideal para design personalizável.
Como temos visto Neste artigo, flexbox é o complemento perfeito para o layout de diferentes módulos de conteúdo de lista e através de pequenas propriedades para serem capazes de alterar Sua aparência, distribuição, tamanho e alinhamento para que possa adequado sem problemas para o dispositivo onde estamos visualizando, mas este é apenas um pequeno exemplo de tudo o que podemos desenvolver. Com imaginação e prática, você pode aplicar a uma multidão de casas e reduzir o tempo de desenvolvimento muito visivelmente. Espero que atenda a des / Connoisseurs desta técnica CSS como guia de consulta. Saudações!