Diferença entre visualização: flexão incorporada e visualização: flexão
display:inline-flex; e display:flex;?
Estou a tentar alinhar verticalmente alguns elementos dentro do Invólucro ID. Foi por isso que dei a propriedade a esta identificação, porque a embalagem de identificação é a embalagem flexível.
Mas não há diferença na apresentação. Eu esperava que tudo no ID de embalagem fosse exibido inline.
#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>6 answers
display: inline-flex não mostra Os itens de flexão Em Linha. Faz com que o recipiente de flexão esteja em linha. 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 ecrã que tenha uma contraparte em linha .1
Não há absolutamente nenhuma diferença no efeito nos itens flex; a disposição flex é idêntica se o recipiente flex é nível de bloco ou nível inline. Em em particular, os próprios itens flex comportam-se sempre como caixas de nível de bloco (embora tenham algumas propriedades dos blocos incorporados). Você não pode mostrar os itens flex em linha; caso contrário, você realmente não tem uma disposição flex.
Não é claro o que você quer dizer exatamente com "alinhamento vertical" ou por que exatamente você quer mostrar o conteúdo em linha, mas eu suspeito que flexbox não é a ferramenta certa para o que você está tentando realizar. As Chances são que o que você está procurando é apenas plain old inline layout (display: inline e/ou display: inline-block), para que o flexbox é não uma substituição; flexbox é não universal solução de layout que todo mundo afirma que ele é (eu estou afirmando isso porque o equívoco é provavelmente porque você está considerando flexbox em primeiro lugar).
1as diferenças entre o layout do bloco e o layout inline estão fora do escopo desta questão, mas o que mais se destaca é a largura automática: caixas de nível de bloco esticar horizontalmente para preencher o bloco que contém, enquanto que as caixas ao nível de linha encolhem para caber o seu conteúdo. Na verdade, é por esta razão sozinho que você quase nunca vai usar {[[0]} a menos que você tenha uma razão muito boa para mostrar o seu recipiente flex em linha.
flex e {[1] } ambos aplicam a disposição flexível às crianças do recipiente. Container with display:flex behaves like a block-level element itself, while display:inline-flex makes the container behaves like an inline element.
A Diferença entre "flex" e "inline-flex"
Resposta curta:
Um está alinhado e o outro responde basicamente como um elemento de bloco(mas tem algumas das suas próprias diferenças).
Resposta mais longa:
Inline-Flex-a versão inline da flex permite ao elemento, e às crianças, ter propriedades flex enquanto ainda permanece no fluxo regular do documento/página web. Basicamente, você pode colocar dois recipientes inline flex na mesma linha, se as larguras eram pequenas o suficiente, sem qualquer estilo em excesso para permitir que eles existissem na mesma linha. Isto é muito parecido com "bloco inline"."
Flex-o contentor e as crianças têm propriedades flex, mas o contentor reserva a linha, uma vez que é retirado do fluxo normal do documento. Responde como um elemento de bloco, em termos de fluxo de documentos. Dois recipientes flexbox não poderiam existir na mesma linha sem um estilo excessivo.O problema que você pode ter
Devido aos elementos que você listou no seu exemplo, embora eu esteja supondo, eu acho que você quer usar o flex para exibir os elementos listados em uma mesma linha a linha, mas continuar a ver os elementos lado a lado.
A razão pela qual você provavelmente está tendo problemas é porque flex e inline-flex têm a propriedade predefinida "flex-direction" configurada para "row."Isto irá mostrar as crianças lado a lado. Mudar esta propriedade para "coluna" permitirá aos seus elementos empilhar e espaço de reserva (largura) igual à largura do 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;
display: flex; flex-direction: row;
display: inline-flex; flex-direction: column;
display: flex; flex-direction: column;
display: inline;
display: block
OK, eu sei que no primeiro pode ser um pouco confuso, mas display está falando sobre o elemento pai, então, significa dizer: display: flex;, é sobre o elemento e quando dizemos que display:inline-flex;, também está fazendo o próprio elemento inline...
div na linha ou bloco , execute o excerto abaixo e poderá ver como display flex se divide para a linha seguinte:
.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>Também Crie rapidamente a imagem abaixo para mostrar o diferença de relance:
Visualização: flex Aplicar a disposição flex apenas nos itens flex ou crianças do recipiente. Assim, o próprio recipiente permanece um elemento de nível de bloco e, assim, ocupa toda a largura da tela.
Isto faz com que cada recipiente flex se mova para uma nova linha no ecrã.Visualização: inline-flex Aplicar a disposição flex aos itens flex ou crianças, bem como ao próprio contentor. Como resultado, o recipiente se comporta como um elemento flex inline, assim como as crianças faça e, assim, assume a largura exigida por seus itens/crianças apenas e não toda a largura da tela.
Isso faz com que dois ou mais recipientes flex um após o outro, exibidos como inline-flex, alinhem-se lado a lado na tela até que toda a largura da tela seja tomada.Você precisa de um pouco mais de informação para que o navegador saiba o que você quer. Por exemplo, as crianças do recipiente precisa ser dito "como" para flexionar.
Eu adicionei {[[0]} ao seu CSS e mudei inline-flex para flex, e você pode ver como os elementos agora se posicionam uniformemente na página.