Diferença entre display: inline-flex e display: flex

Eu tenho dificuldade em entender a display:inline-flex; da propriedade display:inline-flex; . Qual é a diferença entre display:inline-flex; e display:flex; ?

Eu estou tentando alinhar verticalmente alguns elementos dentro do wrapper ID. É por isso que eu dei a display:inline-flex; da propriedade display:inline-flex; para este ID; porque o wrapper de ID é o contêiner flexível.

Mas não há diferença na apresentação. Eu esperava que tudo no ID do wrapper fosse exibido em inline .

 #wrapper { display: inline-flex; /*no difference to display:flex; */ } 
  
header
main
footer

Exemplo de JSFiddle

Qual é a diferença?

display: inline-flex não faz com que os itens flex sejam exibidos inline. Isso torna a exibição do contêiner flexível inline. Essa é a única diferença entre display: inline-flex e display: flex . Uma comparação semelhante pode ser feita entre display: inline-block e display: block , e praticamente qualquer outro tipo de display que tenha uma contraparte inline . 1

Não há absolutamente nenhuma diferença no efeito em itens flexíveis; O layout flexível é idêntico, independentemente de o contêiner flexível ser em nível de bloco ou em linha. Em particular, os próprios itens flex sempre se comportam como checkboxs de nível de bloco (embora tenham algumas propriedades de blocos sequenciais). Você não pode exibir itens flexíveis inline; caso contrário, você não terá um layout flexível.

Não está claro o que exatamente você quer dizer com “alinhamento vertical” ou por que exatamente você deseja exibir o conteúdo em linha, mas suspeito que o flexbox não é a ferramenta certa para o que você está tentando realizar. As chances são que você está procurando apenas layout inline antigo ( display: inline e / ou display: inline-block ), para o qual o flexbox não é um substituto; O flexbox não é a solução de layout universal que todos afirmam ser (estou afirmando isso porque o equívoco é provavelmente o motivo pelo qual você está considerando o flexbox em primeiro lugar).


1 As diferenças entre layout de bloco e layout in-line estão fora do escopo desta questão, mas a que mais se destaca é a largura automática: as checkboxs de nível de bloco esticam horizontalmente para preencher seu bloco, enquanto as checkboxs de nível inline encolhem para se ajustarem conteúdo. Na verdade, é por esse motivo que você quase nunca usará display: inline-flex menos que você tenha uma boa razão para exibir seu contêiner flex em linha.

flex e inline-flex aplicam o layout flexível aos filhos do container. Container with display:flex se comporta como um elemento de nível de bloco, enquanto display:inline-flex faz com que o contêiner se comporte como um elemento inline.

A diferença entre “flex” e “inline-flex”

Resposta curta:

Um é inline e o outro basicamente responde como um elemento de bloco (mas tem algumas diferenças próprias).

Resposta mais longa:

Inline-Flex – A versão inline do flex permite que o elemento, e seus filhos, tenham propriedades flexíveis enquanto permanecem no stream regular do documento / página da web. Basicamente, você pode colocar dois contêineres flexíveis em linha na mesma linha, se as larguras forem pequenas o suficiente, sem qualquer estilo em excesso para permitir que elas existam na mesma linha. Isso é bem parecido com “inline-block”.

Flex – O contêiner e suas crianças têm propriedades flexíveis, mas o contêiner reserva a linha, já que ela é retirada do stream normal do documento. Ele responde como um elemento de bloco, em termos de stream de documentos. Dois contêineres flexbox não poderiam existir na mesma linha sem excesso de estilo.

O problema que você pode estar tendo

Devido aos elementos que você listou em seu exemplo, embora eu esteja supondo, acho que você deseja usar flex para exibir os elementos listados de maneira uniforme linha a linha, mas continuar vendo os elementos lado a lado.

A razão pela qual você provavelmente está tendo problemas é porque o flex e o inline-flex têm a propriedade “flex-direction” padrão definida como “linha”. Isso exibirá as crianças lado a lado. Alterar essa propriedade para “coluna” permitirá que seus elementos empilhem e reservem espaço (largura) igual à largura de seu pai.

Abaixo estão alguns exemplos para mostrar como o flex vs inline-flex funciona e também uma demonstração rápida de como os elementos inline vs block funcionam …

 display: inline-flex; flex-direction: row; 

Violino

 display: flex; flex-direction: row; 

Violino

 display: inline-flex; flex-direction: column; 

Violino

 display: flex; flex-direction: column; 

Violino

 display: inline; 

Violino

 display: block 

Violino

Além disso, um ótimo doc de referência: Um Guia Completo para o Flexbox – truques css

OK, eu sei que a princípio pode ser um pouco confuso, mas a display está falando sobre o elemento pai, então significa quando dizemos: display: flex; , é sobre o elemento e quando dizemos display:inline-flex; , também está fazendo o próprio elemento inline

É como criar um div inline ou bloquear , executar o snippet abaixo e você pode ver como o display flex divide na próxima linha:

 .inline-flex { display: inline-flex; } .flex { display: flex; } p { color: red; } 
  

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer

Exibição: flex aplique o layout flex aos itens flexíveis ou filhos do contêiner somente. Assim, o recipiente em si permanece um elemento de nível de bloco e, portanto, ocupa toda a largura da canvas.

Isso faz com que todos os contêineres flexíveis se movam para uma nova linha na canvas.

Display: inline-flex aplica o layout flexível aos itens flexíveis ou filhos, bem como ao próprio container. Como resultado, o contêiner se comporta como um elemento flexível inline, assim como os filhos, e assim ocupa a largura exigida apenas pelos itens / filhos e não pela largura total da canvas.

Isso faz com que dois ou mais contêineres flexíveis um após o outro, exibidos como inline-flex, se alinhem lado a lado na canvas até que toda a largura da canvas seja tomada.

Você precisa de um pouco mais de informação para que o navegador saiba o que você quer. Por exemplo, os filhos do contêiner precisam saber “como” flexionar.

Fiddle atualizado

Eu adicionei #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } para o seu CSS e mudou o inline-flex para flex , e você pode ver como os elementos agora se espalham uniformemente na página.