Sobes.tech
Junior

Que layouts CSS conheces?

sobes.tech IA

Resposta da IA

  • Flexbox: Sistema unidimensional para alinhar elementos dentro de um contêiner numa única direção (horizontal ou vertical). Ideal para componentes pequenos e para alinhar elementos dentro de um bloco.
  • Grid Layout: Sistema bidimensional para construir grelhas complexas na página. Permite gerir facilmente a disposição de elementos tanto em linhas como em colunas. Perfeito para o layout principal da página.
  • Block Layout: Comportamento padrão de elementos de bloco por defeito. Os elementos ocupam toda a largura disponível e colocam-se um abaixo do outro.
  • Inline Layout: Os elementos colocam-se numa única linha, ocupando uma largura igual ao seu conteúdo.
  • Positioned Layout: Permite posicionar elementos relativamente à sua posição normal, ao elemento pai ou à janela de visualização usando position (static, relative, absolute, fixed, sticky) e propriedades top, right, bottom, left.
  • Table Layout: Recria o comportamento de elementos de tabela (display: table, display: table-cell, etc.). É usado menos que Grid ou Flexbox, para criar estruturas tabulares.
  • Multi-column Layout: Permite dividir o conteúdo de um contêiner em várias colunas, como num jornal. Controlado pelas propriedades column-count e column-width.