27 de julho de 2024
Qual a diferença entre display block, inline, inline-block, flex e inline-flex?
CSS
Diferença entre block e inline
Comecemos entendendo os conceitos básicos de block e inline.
Display: block
Os elementos com display: block são posicionados um abaixo do outro, ocupando toda a largura disponível de seu contêiner pai. Elementos como <div>, <section>, <h1>, <p>, listas (<ul>, <ol>), e <table> são exemplos de elementos que, por padrão, têm comportamento de bloco.
Display: inline
Por outro lado, os elementos com display: inline ocupam apenas o espaço necessário para o seu conteúdo. Quando vários elementos inline são definidos no mesmo nível, eles são posicionados lado a lado. A tag <span> é um exemplo clássico de elemento inline.
Nota: Os conceitos de block e inline se aplicam ao próprio elemento, não aos seus filhos.
E se eu usar inline-block? O navegador dá um print?
Não. Tem um detalhe importante que não pode passar batido. Ao usar display: inline, algumas propriedades de layout não têm efeito como teria com display: block. Tal como width, e height, padding e margin. Para de fato fazer valer essas propriedades, e, ao mesmo tempo, manter o posicionamento lado a lado, temos inline-block.
Além disso, um elemento inline-block herda as propriedades de posicionamento de textos, como align-text.
Flex e inline-flex
Ao atribuir o valor flex para a propriedade display, seus filhos se posicionarão de forma flexível dentro desse elemento. Todas as propriedades para manipular flexbox agora terão efeito, como flex-wrap, flex-direction, etc. Mas, quanto ao posicionamento do container, ele será do tipo block.
Para usar um alinhamento inline no container e flexbox para seus filhos, temos inline-flex. Simples assim.
Na documentação da MDN há um exemplo interativo para você ver na prática como funciona.: Display — CSS | MDN (mozilla.org)