Valor padrão: 0 1 Auto.

A W3C recomenda usar a propriedade Flex abreviada, em vez de propriedades individuais, já que o Flex redefine corretamente quaisquer componentes não especificados para uso típico.

alinhar-self.

A propriedade Align permite que você substitua o alinhamento padrão (ou o valor especificado por meio de itens de alinhamento) para elementos flexíveis individuais. Para entender os valores disponíveis, consulte a descrição dos itens de alinhamento para o contêiner flex.

Valores

Para o terceiro e quarto flex elementos, o alinhamento é substituído pela propriedade Align-Self.

Módulo Flexbox-leuauta. (Caixa flexível - "bloco flexível", em este momento Recomendação do candidato W3C) coloca a tarefa de oferecer uma maneira mais eficiente de estabelecer, nivelamento e distribuição de espaço livre entre elementos em um recipiente, mesmo quando seu tamanho é desconhecido e / ou dinâmico (daí a palavra "flexível").

A ideia principal do Guarda Flex no recipiente dotou a capacidade de alterar a largura / altura (e ordem) de seus elementos para o melhor enchimento do espaço (na maioria dos casos - para suportar todos os tipos de exibições e telas ). O contêiner flexível estica os elementos para preencher o espaço livre ou comprime-os para evitar a fronteira.

O mais importante, o Flexbox-Leieut não depende da direção, em contraste com as leiantes usuais (blocos, localizados verticalmente, e os elementos em linha são horizontalmente). Enquanto a Liaut usual é ótima para páginas da Web, não tem flexibilidade (sem canalybur) para suportar aplicativos grandes ou complexos (especialmente quando se trata de alterar a orientação, redimensionamento, alongamento, compressão, etc.).

Comente: Flexbox-Leuaout é mais adequado para partes compostas da aplicação e leuautics de pequena escala, enquanto a grade é mais usada para laianos em grande escala.

Fundamentos

Porque O Flexbox é um módulo inteiro e não apenas uma única propriedade, combina muitas propriedades. Alguns deles devem ser aplicados ao contêiner (elemento pai, o chamado recipiente Flex.), enquanto outras propriedades se aplicam a elementos filho, ou elementos Flex..

Se a Leuaout usual é baseada nas direções de blocos e elementos em linha, o Flex-Liaut é baseado nas "direções de fluxo flexível". Confira este esquema da especificação, explicando a ideia básica do Flex-leuaitov.

A maioria dos elementos será distribuída ao longo eixo principal. (de principal começo. antes main-End.) ou junto eixo transversal (de start-start. antes transversal.).

• eixo principal. - O eixo principal ao longo dos quais os elementos Flex estão localizados. Nota, não é necessariamente horizontal, tudo depende da propriedade Flex-Direction (veja abaixo).
• principal começo. | main-End. - Os elementos Flex são colocados em um recipiente da posição inicial da posição principal.
• tamanho principal. - Largura ou altura do elemento Flex, dependendo do valor primário selecionado. O valor principal pode ser largura ou altura do elemento.
• eixo cruzado. - eixo transversal perpendicular ao principal. Sua direção depende da direção do eixo principal.
• start-start. | transversal. - Flex Linhas são preenchidas com elementos e estão localizadas em um recipiente da posição de início cruzado até a posição transversal.
• tamanho cruzado - A largura ou a altura do elemento flexível, dependendo do tamanho da dimensão, é igual a esta magnitude. Esta propriedade coincide com a largura ou a altura do item, dependendo do tamanho da dimensão.

Propriedades.

display: Flex | Inline-Flex;

Aplica-se a:

Determina o contêiner flexível (inline ou bloco, dependendo do valor selecionado), conecta o contexto flexível para todos os seus descendentes imediatos.

Tenha em mente:

• Colunas CSS não funcionam com um recipiente flexível
• flutuar, claro e alinhamento vertical não funcionam com elementos flex

flex-direção.

Aplica-se a: Elemento Parental Flex-Recipiente.

Define o eixo principal do eixo principal, determinando assim a direção para elementos flexos colocados no recipiente.

• linha (padrão): da esquerda para a direita para LTR, à direita para a esquerda para RTL;
• linha-reversa: direita para a esquerda para LTR, da esquerda para a direita para RTL;
• coluna: semelhante à linha, de cima para baixo;
• coluna-REVERSE: semelhante à linha reversa, de baixo para cima.

flex-Wrap.

Aplica-se a: Elemento Parental Flex-Recipiente.

Determina se o recipiente será de linha única ou multi-line, bem como a direção do eixo transversal determinando a direção na qual novas linhas serão localizadas.

• nowrap (padrão): linha única / de esquerda para a direita para LTR, direita para a esquerda para RTL;
• envoltório: multi-line / da esquerda para a direita para LTR, à direita para a esquerda para RTL;
• wrap-Reverse: Multi-Line / Direita para a esquerda para LTR, da esquerda para a direita para RTL.

fluxo flexível.

Aplica-se a: Elemento Parental Flex-Recipiente.

Esta é uma redução para as propriedades do flex-direção e do filme flexível, que juntos definem o eixo principal e transversal. O padrão leva o valor da linha Nowrap.

Aplica-se a: Elemento Parental Flex-Recipiente.

Determina o alinhamento em relação ao eixo principal. Ajuda a distribuir o espaço livre restante no caso quando os elementos da linha não são "alongamento" ou alongamento, mas já alcançaram seu tamanho máximo. Também permite que de alguma forma controlar o alinhamento dos elementos quando a string é liberada.

• flex-Start: Os elementos são deslocados para o início da linha;
• flex-End: Os elementos são deslocados até o final da string;
• centro: Os elementos estão alinhados no centro da linha;
• espaço-entre: elementos são distribuídos uniformemente (o primeiro elemento no início da linha, o último - no final);
• espaço em torno: elementos são distribuídos uniformemente com uma distância igual entre si e as fronteiras da string.

Aplica-se a: Elemento Parental Flex-Recipiente.

Define o comportamento padrão para os elementos Flex são relativos ao eixo transversal na linha atual. Considere esta versão do conteúdo de justificação para o eixo transversal (perpendicular ao principal).

• flex-Start: O limite intermediário para itens está localizado na posição de início cruzado;
• flex-End: A borda transversal para itens está localizada na posição transversal;
• centro: Os elementos estão alinhados no centro do eixo transversal;
• linha de base: elementos estão alinhados para sua linha de base;
• estiramento (padrão): Os elementos são esticados, preenchendo o contêiner (tendo em conta a largura min-largura / max).

Aplica-se a: Elemento Parental Flex-Recipiente.

Alinha as linhas de contêineres flexíveis na presença de um espaço livre no eixo transversal, da mesma forma que o conteúdo de justificação faz no eixo principal.

Comente: Esta propriedade não funciona com uma única caixa de flexbox.

• flex-Start: As linhas estão alinhadas em relação ao início do contêiner;
• flex-End: As linhas são alinhadas em relação ao final do recipiente;
• centro: As linhas estão alinhadas no centro do recipiente;
• espaço-entre: linhas são distribuídas uniformemente (a primeira linha no início da linha, este último está no final);
• espaço-ao redor: as linhas são distribuídas uniformemente com uma distância igual;
• estiramento (padrão): As linhas são esticadas, preenchendo o espaço livre.

pedido

Aplica-se a:

Por padrão, os elementos Flex estão localizados em sua ordem original. No entanto, a propriedade Order pode controlar a ordem de sua localização no recipiente.

Pedido:<inteiro\u003e

flex-crescer.

Aplica-se a: Um elemento filha / flex.

Determina para o elemento flexível a capacidade de "crescer", se necessário. Leva um valor indexado que serve como uma proporção. Determina que fração de um espaço livre dentro do contêiner um elemento pode ocupar.

Se todos os itens tiverem uma propriedade Flex-crescer como 1, cada descendente receberá o mesmo tamanho dentro do contêiner. Se você definir um dos descendentes para 2, então levará duas vezes mais espaço do que outros.

Flex-Cresm:<número\u003e (padrão 0)

flex-Shrink.

Aplica-se a: Um elemento filha / flex.

Determina para o elemento flexível a capacidade de comprimir se necessário.

Flex-Shrink: (Padrão 1)

Números negativos não são aceitos.

flex-Base.

Aplica-se a: Um elemento filha / flex.

Determina o tamanho padrão para o elemento antes da distribuição do espaço no contêiner.

Flex-Base:<comprimento\u003e. | Auto (auto padrão)

flex.

Aplica-se a: Um elemento filha / flex.

Esta é uma redução para crescer flex, flex-shrink e flex. O segundo e terceiro parâmetros (flex-shrink, flex-base) são opcionais. O valor padrão é 0 1 Auto.

alinhar-self.

Aplica-se a: Um elemento filha / flex.

Permite que você substitua o alinhamento padrão ou em itens de alinhamento, para elementos flexíveis individuais.

Consulte a descrição da propriedade Align Item para uma melhor compreensão dos valores disponíveis.

Exemplos

Vamos começar com um exemplo muito, muito simples, ocorrendo quase todos os dias: alinhamento exatamente no centro. Não há nada mais fácil se você usar o Flexbox.

Este exemplo é baseado no fato de que a margem no recipiente flexível especificada como automático absorve o espaço desnecessário, então a tarefa de referência assim lança o elemento exatamente no centro de ambos os eixos.

Agora vamos usar algumas propriedades. Apresente um conjunto de 6 elementos de tamanho fixo (para beleza), mas com a capacidade de alterar o tamanho do contêiner. Queremos distribuí-los uniformemente horizontalmente, de modo que quando a janela do navegador é redimensionada, tudo parecia bom (sem gravador de mídia!).

Preparar. Tudo o resto é uma questão de registro. Abaixo está localizado Codepen, que demonstra este exemplo. Certifique-se de tentar esticar / apertar a janela do navegador e ver o que acontece.

Vamos tentar mais alguma coisa. Imagine que precisamos de uma navegação alinhada na borda direita no topo do nosso site, mas queremos que ele se alinhe no centro de telas de tamanho médio e se transformasse em uma coluna em pequenas. Tudo é simples o suficiente.

Vamos tentar algo melhor e jogar com flexibilidade de flex-elementos! Que tal orientado em dispositivos móveis Layout de três chone com boné completo e porão? E outra ordem de localização.

Se você disser curto, o layout com Flexbox nos dá soluções simples de tarefas difíceis uma vez. Por exemplo, quando você precisa alinhar o elemento vertical ou pressione o porão para a parte inferior da tela, ou simplesmente inserir vários blocos em uma linha para que eles ocupem tudo o espaço livre. Tais tarefas são resolvidas sem flexão. Mas, por via de regra, essas soluções são mais relacionadas às "muletas" - as recepções para usar CSS não se destinam. Enquanto com flexbox, essas tarefas são resolvidas exatamente como o modelo flexível está pensando.

Módulo de layout de caixa CSS flexível (módulo CSS para módulos com blocos flexíveis), curta flexbox, criado para remover falhas ao criar uma variedade de estruturas HTML, incluindo adaptadas sob diferentes larguras e altura, e faça um layout de lógico e simples. E a abordagem lógica, como regra, funciona em lugares inesperados, onde o resultado não foi verificado - nossa lógica!

O Flexbox permite-lhe controlar elegantemente os parâmetros mais diferentes dos elementos dentro do recipiente: direção, ordem, largura, altura, alinhamento, distribuição de espaço livre, alongamento e compressão de elementos.

Conhecimento básico

Flexbox consiste em um contêiner e seus elementos filhos (itens) (elementos flexíveis).

Para incluir flexbox, qualquer Elemento HTML. suficiente para atribuir a exibição da propriedade CSS: flex; ou exibir: Inline-Flex; .

Depois de ligar as propriedades do flex, dois eixos são criados dentro do contêiner: principal e transversal (perpendicular (⊥), eixo cruzado). Todos os elementos aninhados (primeiro nível) são construídos no eixo principal. Por padrão, o eixo principal é horizontal e tem a direção da esquerda para a direita (→), e o eixo transversal, respectivamente, vertical e é direcionado de cima para baixo (↓).

O eixo principal e cruzado pode ser alterado em lugares, então os elementos serão localizados no topo (↓) e quando eles param de encaixar em altura, eles se moverão da esquerda para a direita (→) - isto é, os eixos simplesmente mudados em lugares . Ao mesmo tempo, o começo e o final da localização dos elementos não muda - apenas direcções (eixo) mudam! É por isso que você precisa imaginar o eixo dentro do contêiner. No entanto, não é necessário pensar que existem alguns eixos "físicos" e eles influenciam alguma coisa. O eixo aqui é apenas a direção do movimento dos elementos dentro do recipiente. Por exemplo, se indicamos o alinhamento dos elementos no centro do eixo principal e, em seguida, alterou a direção deste eixo principal, ele será alterado e alinhamento: os elementos estavam no meio horizontalmente e aço no meio verticalmente. . Consultar exemplo.

Outro recurso importante da caixa Flex é a presença de uma linha na direção transversal. Para entender o que estamos falando, vamos imaginar que há um eixo horizontal principal, muitos elementos e eles não "subir" no contêiner, então eles vão para outra linha. Aqueles. O recipiente parece com isto: o recipiente, dentro de duas linhas, em cada linha para vários elementos. Apresentado? Agora lembre-se que podemos alinhar verticalmente não apenas elementos, mas também linhas! Como funciona bem visível no exemplo da propriedade. E então parece esquematicamente:

Propriedades CSS.O que pode afetar o modelo de construção de layout: flutuar, limpar, alinhar vertical, colunas não funcionam no design flexível. Ele usa outro modelo para a construção de um layout e essas propriedades CSS são simplesmente ignoradas.

Propriedades CSS Flexbox.

Flexbox contém regras de CSS diferentes para controlar todo o design flexível. Alguns precisam ser aplicados ao contêiner principal, enquanto outros para os elementos deste contêiner.

Para contêiner

Inclui propriedade Flex para item. Nesta propriedade, o elemento investido nele cai: apenas os descendentes do primeiro nível são afetados - eles se tornarão elementos do contêiner flexão.

• flex. - O elemento é esticado para toda a largura e tem seu espaço total entre os blocos circundantes. Remo ocorre no início e no final do bloco.
• inline-Flex. - O elemento é simplificado por outros elementos. Nesse caso, sua parte interna é formatada como elemento de bloco, e o próprio elemento é como embutido.

flex e Inline-Flex diferem no fato de que interagir de maneira diferente com os elementos circundantes, como exibir: bloco e exibição: bloco inline.

Altera a direção do eixo principal do contêiner. O eixo transversal muda de acordo.

• linha (padrão) - direção dos elementos da esquerda para a direita (→)
• coluna. - Direção de elementos de cima para baixo (↓)
• linha-reversa. - direção dos elementos à direita (←)
• coluna-reversa. - direção dos elementos de baixo para cima ()

Gerencia a transferência de elementos que incomodavendo para o recipiente.

• nowrap (padrão) - Elementos aninhados estão localizados em uma linha (durante a direção \u003d linha) ou em uma coluna (durante a direção \u003d coluna), independentemente de serem colocadas no recipiente ou não.
• embrulho. - Inclui a transferência de itens para a próxima linha se eles não forem colocados no contêiner. Isso inclui o movimento de elementos no eixo transversal.
• wrap-reverse. - Também esse envolve apenas a transferência não será para baixo e para cima (na direção oposta).

Combina as propriedades flex-direção e flex-wrap. Eles são frequentemente usados \u200b\u200bjuntos, então a propriedade Flex-Flow foi criada para gravar menos código.

fLOX-FLOW aceita os valores das duas propriedades, separadas por um espaço. Ou você pode especificar um valor de qualquer propriedade.

/ * Apenas flex-direção * / flex-flow: linha; FLEX-FLOW: ROW-REVERSE; FLEX-FLOW: Coluna; FLEX-FLOW: coluna-reversa; / * Apenas flex-wrap * / flex-flow: Nowrap; FLEX-FLOW: Enrole; FLEX-FLOW: Wrap-Reverse; / * Imediatamente ambos os significados: flex-direção e flex-wrap * / flex-flow: linha Nowrap; FLOX-FLOW: envoltório da coluna; FLOW FLOW: REVERSO REVERSO DA COLUNA-REVERSO; Justificar-conteúdo:

Alinha elementos no eixo principal: se direção \u003d linha, depois horizontalmente e se a direção \u003d coluna, então verticalmente.

• flex-Start (padrão) - Os elementos vão desde o começo (no final, pode haver um lugar).
• flex-End. - Os elementos são equalizados por um fim (o local permanecerá no início)
• centro - no centro (lugar permanecerá à esquerda e à direita)
• espaço entre. - elementos extremos são pressionados nas bordas (o local entre os elementos é distribuído uniformemente)
• espaço-ao redor. - O espaço livre é distribuído uniformemente entre os elementos (os elementos extremos não são pressionados nas bordas). O espaço entre a borda do recipiente e os elementos extremos serão duas vezes menos do que o espaço entre os elementos no meio da linha.
• espaço-uniformemente

Alinha as fileiras nas quais os elementos no eixo transversal estão localizados. O mesmo que justificar conteúdo apenas para o eixo oposto.

Nota: funciona quando há pelo menos 2 linhas, isto é. Se houver apenas uma linha, nada acontece.

Aqueles. Se flex-direção: linha, esta propriedade alinhará linhas invisíveis verticalmente |. É importante notar que a elevação do bloco deve ser ajustada rigidamente e deve ser maior que a altura da série, caso contrário as próprias linhas esticarão o contêiner e seu alinhamento perderá seu significado, porque não há espaço livre entre eles. . Mas quando flex-direção: coluna, as linhas se movem horizontalmente → e a largura do contêiner é quase sempre maior que a largura da série e o alinhamento das linhas imediatamente adquire o significado ...

• estiramento (padrão) - linhas estiramento preenchendo a corda completamente
• flex-Start. - As linhas são agrupadas no topo do recipiente (pode haver um lugar no final).
• flex-End. - As linhas são agrupadas na parte inferior do contêiner (o local permanecerá no início)
• centro - As linhas são agrupadas no centro do recipiente (o local permanecerá nas bordas)
• espaço entre. - As linhas extremas são pressionadas para as bordas (o local entre as linhas é distribuído uniformemente)
• espaço-ao redor. - O espaço livre é distribuído uniformemente entre as linhas (os elementos extremos não são pressionados para as bordas). O espaço entre a borda do recipiente e os elementos extremos serão duas vezes menos do que o espaço entre os elementos no meio da linha.
• espaço-uniformemente - Também esse espaço-ao redor, apenas a distância nos elementos extremos para as bordas do recipiente é o mesmo entre os elementos.

Alinha elementos no eixo transversal dentro da linha (linha invisível). Aqueles. As fileiras são alinhadas por meio de alinhamento, e os elementos dentro dessas linhas (cordas) através de itens de alinhamento e tudo isso no eixo transversal. Não há tal separação do eixo principal, não há conceitos de série e elementos estão alinhados através de conteúdo de justificação.

• estiramento (padrão) - Elementos estiramento preenchendo a string completamente
• flex-Start. - Os elementos são pressionados ao início da linha
• flex-End. - Os elementos são pressionados no final da linha
• centro - Elementos estão nivelando no centro da linha
• linha de base - Elementos estão alinhados pelo texto da linha de base

Para elementos de contêiner

Especifica o fator crescente do elemento na presença de um espaço livre no contêiner. O padrão Flex - crescer: 0 ou seja. Não dos elementos deve aumentar e preencher um espaço livre no recipiente.

Flex - Crescer: 0

• Se todos os elementos indicam flex-crescer: 1, todos se estendem igualmente e preenchem tudo o espaço livre no contêiner.
• Se um dos elementos indicar o Flex - crescer: 1, ele preencherá todo o espaço livre no contêiner e o alinhamento por meio de Justify-Content Work não poderá funcionar: Não há nada para alinhar o espaço livre ...
• Quando flex-crescer: 1. Se um deles tiver flex-crescer: 2, será 2 vezes mais do que todos os outros
• Se todos os blocos flexíveis dentro do contêiner Flex tiverem flex-crescer: 3, então eles serão do mesmo tamanho
• Com flex-crescer: 3. Se um deles tem flex-crescer: 12, será 4 vezes mais do que todos os outros

Como funciona? Suponha que o contêiner tenha uma largura de 500px e contenha dois elementos, cada um com uma largura básica de 100PX. Portanto, 300 pixels livres permanecem no recipiente. Agora, se você especificar flex-crescer: 2 primeiro elemento; e o segundo fluxo crescer: 1; Os blocos levarão toda a largura do contêiner disponível e a largura do primeiro bloco será de 300px e o segundo 200PX. Isto é explicado pelo fato de que o espaço livre disponível 300px no contêiner foi distribuído entre os elementos na proporção 2: 1, + 200px do primeiro e + 100px segundo.

Nota: No valor que você pode especificar números fracionários, Por exemplo: 0.5 - Flex-Crescer: 0,5

Especifica o fator de redução do elemento. O recurso é o flexível oposto - crescer e determina como o elemento deve ser compactado se não houver espaço livre no contêiner. Aqueles. A propriedade começa a trabalhar quando a soma dos tamanhos de todos os elementos é maior que o tamanho do contêiner.

Padrão Flex-Shrink: 1

Suponha que o contêiner tenha uma largura de 600px e contenha dois elementos, cada um com uma largura de 300px - Flex-Base: 300px; . Aqueles. Dois elementos preencher completamente o recipiente. O primeiro elemento indicará flex-shrink: 2; e o segundo flex-shrink: 1; . Agora reduzindo a largura do recipiente em 300px, isto é. Os elementos devem ser com 300px para ser localizado dentro do recipiente. Eles serão comprimidos em uma proporção de 2: 1, ou seja. A primeira unidade vai se juntar ao 200px, e o segundo a 100 px e as novas dimensões dos elementos serão 100px e 200px.

Nota: No valor, você pode especificar números fracionários, por exemplo: 0.5 - Flex-Shrink: 0.5

Define a largura básica do elemento - a largura antes das condições restantes que afetam a largura do elemento serão calculadas. O valor pode ser especificado em PX, EM, REM,%, VW, VW, etc. A largura final dependerá da largura da base e dos valores de flex-crescer, flex-shrink e conteúdo dentro do bloco. Com Auto, o elemento recebe uma largura básica em relação ao conteúdo dentro dela.

Padrão: Auto.

Às vezes é melhor instalar a largura do elemento rigidamente através da propriedade da largura usual. Por exemplo, largura: 50%; Isso significará que o elemento dentro do recipiente será exatamente 50%, no entanto, as propriedades Flex-Crese e Flex-Shrink também funcionarão. Isso pode ser necessário quando o elemento é esticado por conteúdo dentro dele, mais especificado na base flexível. Exemplo.

flex-Base será "difícil" se redefinir a tração e compressão: Flex-Base: 200px; Flex-crescer: 0; Flex-Shrink: 0; . Tudo isso pode ser escrito como flex: 0 0 200px; .

Gravação curta de três propriedades: Flex-Crescer Flex-Shrink Flex Base.

Padrão: Flex: 0 1 Auto

No entanto, você pode especificar um e dois valores:

Flex: Nenhum; / * 0 0 Auto * / / * Number * / Flex: 2; / * Flex-Crement (Flex-Base vai para 0) * / / * Não Número * / Flex: 10em; / * Flex-Base: 10em * / Flex: 30px; / * Flex-Base: 30px * / flex: Auto; / * Flex-Base: Auto * / Flex: Conteúdo; / * Flex-Base: Conteúdo * / Flex: 1 30px; / * Flex-Crescer e Flex-Base * / Flex: 2 2; / * Flex-Crescer e Flex-Shrink (Flex-Base Going 0) * / Flex: 2 2 10%; / * Flex-crescer e flex-shrink e Flex-Base * / Align-self:

Permite alterar a propriedade de itens de alinhamento, apenas para um item separado.

Padrão: do contêiner de itens de alinhamento

• alongamento. - O elemento é esticado enchendo a string completamente
• flex-Start. - O elemento é pressionado para o início da linha
• flex-End. - O elemento é pressionado para o final da string
• centro - O elemento é nivelado no centro da linha

linha de base - O elemento é alinhado pela linha básica do texto

Permite alterar a ordem (posição, posição) do elemento na linha geral.

Padrão: ordem: 0

Por padrão, os elementos têm ordem: 0 e colocar na ordem de sua aparência no código HTML e direção da linha. Mas se você alterar o valor da propriedade Order, os itens serão construídos em ordem de valores: -1 0 1 2 3 .... Por exemplo, se um dos itens indicar a ordem: 1, você será primeiro zero e, em seguida, um elemento de 1.

Portanto, é possível, por exemplo, um primeiro elemento a se transformar no final, sem alterar a direção do movimento de outros elementos ou código HTML.

Notas

Qual é a diferença entre a Flex-Base da largura?

Abaixo de diferenças importantes entre a base flexível e a largura / altura:

flex-Base funciona apenas para o eixo principal. Isso significa que quando flex-direção: Flex Flex-Base controla a largura (largura) e, quando flex-direção: a coluna controla a altura (altura). .

a Flex-Base se aplica apenas aos elementos flexionados. Então, se você desativar flex no contêiner, esta propriedade não terá efeito.

Os elementos absolutos do contêiner não participam do design Flex ... e, portanto, o flex-base não afeta os elementos do contêiner flexível se estiverem absolutamente posicionados: Absolute. Eles precisarão especificar largura / altura.

• Ao usar os valores Flex Properties 3 (Flex-Crescer / Flex-Shrink / Flex Base), você pode combinar e escrever curto e largura crescer ou encolher você precisa escrever separadamente. Por exemplo: flex: 0 0 50% \u003d\u003d Largura: 50%; Flex-shrink: 0; . Às vezes é apenas inconveniente.

Se possível, ainda dê a preferência flex. Use a largura somente quando o Flex-Base não é adequado.

Diferenças Flex-Base da largura - Bug ou Fich?

O conteúdo dentro do elemento Flex corta e não pode ir além de seus limites. No entanto, se você definir a largura por largura ou largura máxima, e não flexionar, o elemento dentro do contêiner flexível poderá ir além desse contêiner (às vezes você precisa desse comportamento). Exemplo:

Exemplos de layout flexível

Nos exemplos, em qualquer lugar usa prefixos para navegador transversal. Eu fiz isso para ler css conveniente. Portanto, veja os exemplos mais recentes. versões do Chrome ou firefox.

# 1 exemplo simples com alinhamento vertical e horizontal

Vamos começar com o exemplo mais simples - nivelamento verticalmente e horizontalmente simultaneamente e em qualquer altura do bloco, mesmo borracha.

Ou mais, sem bloqueio dentro:

# 1.2 Separação (lacuna) entre os elementos do bloco flexível

Para posicionar os elementos do contêiner nas bordas e selecionar arbitrariamente o elemento após o qual haverá uma pausa, você precisa usar a propriedade da margem esquerda: Auto ou Margin-Direita: Auto.

# 2 menu adaptativo no flex

Faça um menu no topo da página. Em uma tela larga, deve estar certa. Em média, alinhado no meio. E em um pequeno elemento deve estar em uma nova linha.

# 3 colunas adaptativas 3

Este exemplo mostra a rapidez e convenientemente 3 colunas, que, ao se estreitar, se transformarão em 2 e depois em 1.

Por favor, note que isso pode ser feito sem usar regras de mídia, todos no Flex.

Vá para Jsfiddle.net e altere a largura da seção "Result"

# 4 blocos adaptativos no flex

Suponha que precisemos retirar 3 blocos, um grande e dois pequenos. Ao mesmo tempo, é necessário que os blocos se encaixem em pequenas telas. Faço:

Vá para Jsfiddle.net e altere a largura da seção "Result"

# 5 Galeria em flex e transição

Este exemplo mostra a rapidez com que você pode fazer um acordeão bonito com fotos no Flex. Preste atenção à propriedade de transição para flex.

# 6 flexionar em flex (apenas um exemplo)

Tarefa Faça um bloco flexível. De modo que o início do texto em cada bloco estava na mesma linha horizontal. Aqueles. Com a largura da largura, os blocos crescem em altura. É necessário que a imagem esteja no topo, o botão está sempre no andar de baixo, e o texto no meio começou em uma linha horizontal ...

Para resolver este problema, os próprios blocos são estendidos pela Flex e a largura máxima possível é instalada. Cada unidade interna também é flexível com um design, com uma direção flexível: coluna; e elemento no meio (onde o texto está localizado) é esticado flex-crescer: 1; Para preencher todo o espaço livre, o resultado é alcançado - o texto começou com uma linha ...

Mais exemplos

Suporte ao navegador - 98,3%

Claro, não há suporte completo, mas todos navegadores modernos Suporte a desenhos do Flexbox. Para alguns, você ainda precisa especificar os prefixos. Para uma foto real, olhe em Caniuse.com e veja que 96,3% do navegador usado hoje funcionará sem prefixos, com prefixos de 98,3%. Este é um ótimo indicador, a fim de usar corajosamente o Flexbox.

Para saber quais prefixos são relevantes hoje (junho de 2019), vou dar um exemplo de todas as regras flexíveis com prefixos necessários:

/ * Recipiente * / .flex (display: -webkit-box; display: -ms-flexbox; display: flex; exibir: -webkit-inline-caixa; display: -ms-inline-flexbox; display: inline-flex; -Webkit-box-orient: vertical;-web-work-orient-direção: normal; -ms-flex-direção: coluna; flex-direção: coluna; -ms-flex-wrap: wrap; flex-wrap: wrap; -FLEX-FLOW: Coluna Wrap; FLOW FLOW: Coluna Wrap; -WEBKIT-Box-Pack: Justify; -ms-flex-pack: Justify; Justify-Content: Space - entre; -ms-flex-line-line-back: Distribuir; Alinhamento de alinhamento: espaço-ao redor;) / * elementos * / .flex-item (-webkit-box-flex: 1; -ms-flex-positivo: 1; flex-crescer: 1; -ms-flex- Negativo: 2; flex-shrink: 2; -ms-flex-flex-preferido: 100px; flex-base: 100px; -ms-flex: 1 2 100px; flex: 1 2 100px; -ms-flex-item-align : Centro; alinhar-self: centro; -Webkit-box-ordinal-grupo: 3; -ms-flex-ordem: 2; ordem: 2;)

É melhor se as propriedades com prefixos irão para a propriedade original.
Não há desnecessário para prefixos hoje (por Caniuse) hoje (por Caniuse), mas em geral prefixos mais.

• (Novo) - Nova Sintaxe: Display: Flex; .
• (Tweener) - Antiga sintaxe não oficial 2011: Display: Flexbox; .
• (Antigo) - antiga sintaxe 2009: display: caixa;

Vídeo

Bem, não se esqueça do vídeo, às vezes também é interessante e compreensível. Aqui está um par de populares:

Links úteis para flex

flexboxFroggy.com - Jogo Educacional Flexbox.

O FlexPlorer é um designer de código flexível visual.