Qual é a diferença entre display: inline-flex e display: flex?

331

Estou tentando alinhar verticalmente elementos dentro de um invólucro de identificação. Eu dei a propriedade display:inline-flex;para esse ID, pois o wrapper de ID é o contêiner flex.

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

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>
Expandir snippet

css  flexbox 
— astridx
fonte

Respostas:

407

display: inline-flexnão faz com que os itens flexíveis sejam exibidos em linha. Faz com que o contêiner flexível seja exibido em linha. Essa é a única diferença entre display: inline-flexe display: flex. Uma comparação semelhante pode ser feita entre display: inline-blocke display: block, e praticamente qualquer outro tipo de exibição que tenha uma contraparte embutida .1

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

Não está claro o que exatamente você quer dizer com "alinhar verticalmente" ou por que exatamente deseja exibir o conteúdo em linha, mas suspeito que o flexbox não é a ferramenta certa para o que você está tentando realizar. É provável que você esteja procurando apenas um layout embutido ( display: inlinee / ou display: inline-block) antigo e simples , pelo qual o flexbox não é um substituto; O flexbox não é a solução de layout universal que todos afirmam ser (afirmo isso porque o equívoco é provavelmente o motivo pelo qual você está considerando o flexbox em primeiro lugar).

1 As diferenças entre o layout do bloco e o layout embutido estão fora do escopo desta pergunta, mas a que mais se destaca é a largura automática: as caixas no nível do bloco se estendem horizontalmente para preencher o bloco que as contém, enquanto as caixas no nível interno se encolhem para se ajustarem às suas necessidades. conteúdo. De fato, é apenas por esse motivo que você quase nunca utilizará, a display: inline-flexmenos que tenha uma boa razão para exibir seu contêiner flexível em linha.

— BoltClock
fonte
14
Demonstração fiddle reforçada para diferenciar inline-flexe flex: jsfiddle.net/mgr0en3q/1 violino originais por @ peixe gráficos e @astridx
— Kevin Law
Resposta absolutamente útil. Eu fiquei confuso na primeira vez. Quando aplico o flex inline, o item flex também não muda quando aplico com o display flex. Na verdade, se aplicam no recipiente flexível :)
— Faris Rayhan
68

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

É como criar um div inline ou um bloco , execute o snippet abaixo e você pode ver como se display flexdivide a próxima linha:

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>
Expandir snippet

Crie também rapidamente a imagem abaixo para mostrar a diferença rapidamente:

flex de exibição vs flex de linha

— Alireza
fonte
3
O que você está usando para esta foto? Essa fonte é muito legal.
— shu
5
Há um pequeno erro de digitação na imagem acima. "display: flex-inline" deve ser "display: inline-flex" semelhante a "inline-block", etc.
— AlienKevin
62

flexe inline-flexambos aplicam o layout flexível aos filhos do contêiner. O contêiner display:flexse comporta como um elemento de nível de bloco em si, enquanto display:inline-flexfaz o contêiner se comportar como um elemento embutido.

— Leo
fonte
29

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 de suas próprias diferenças).

Resposta mais longa:

Inline-Flex - A versão inline do flex permite que o elemento, e seus filhos, tenham propriedades flex, enquanto ainda permanecem no fluxo 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 nenhum excesso de estilo para permitir que eles existam na mesma linha. Isso é bastante semelhante ao "bloco embutido".

Flex - O contêiner e seus filhos têm propriedades flex, mas o contêiner reserva a linha, pois é retirado do fluxo normal do documento. Ele responde como um elemento de bloco, em termos de fluxo 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 no seu exemplo, embora eu suponha, acho que você deseja usar o flex para exibir os elementos listados de maneira uniforme, linha por linha, mas continua vendo os elementos lado a lado.

O motivo pelo qual você provavelmente está tendo problemas é que flex e inline-flex têm a propriedade "flex-direction" padrão definida como "row". 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 excelente documento de referência: Um guia completo para o Flexbox - truques de css

15

Exibição: flex aplica o layout flex apenas aos itens flex ou filhos do contêiner. Portanto, o próprio contêiner permanece um elemento de nível de bloco e, portanto, ocupa toda a largura da tela.

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

Exibição: inline-flex aplica layout flexível aos itens flex ou filhos, bem como ao próprio contêiner. Como resultado, o contêiner se comporta como um elemento flexível em linha, assim como as crianças e, portanto, ocupa a largura exigida apenas por seus itens / filhos, e não toda a largura da tela.

Isso faz com que dois ou mais contêineres flexíveis, um após o outro, exibidos como flexão em linha, se alinhem lado a lado na tela até que toda a largura da tela seja capturada.

— Noor Jahan Mukammel
fonte
1
"aplicar layout flexível [...] ao próprio contêiner" [citação necessário]
— BoltClock
1

Você precisa de um pouco mais de informação para que o navegador saiba o que deseja. Por exemplo, os filhos do contêiner precisam ser informados "como" flexionar.

Updated Fiddle

Eu adicionei #wrapper > * { flex: 1; margin: auto; }ao seu CSS e mudei inline-flexpara flex, e você pode ver como os elementos agora se espaçam uniformemente na página.

— GRÁFICOS FiSH
fonte
2
Obrigado por sua resposta, mas eu sabia que poderia fazê-lo dessa maneira. Eu só entendi mal a exibição da propriedade: inline-flex; - Pensei que essa propriedade fosse uma maneira mais fácil de atingir meu objetivo. Mas, entre os últimos dias, soube que essa propriedade apenas exibe o contêiner em linha. Com um segundo plano adicionado, agora vejo a diferença entre as propriedades exibidas: inline-flex; e exibição: flex; em uma caixa flexível. jsfiddle.net/vUSmV/101
— astridx
-1

Abrir na página inteira para entender melhor

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}
<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>
Expandir snippet

— Pawan Gangwani
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.