Alinhando os Planetas

Normal-Flow

É o modo como os elementos HTML block e inline ficam na tela por padrão. Também chamado de Flow Layout, tags do tipo block, como a <p>, <div> e outras, se comportam de modo a ocupar todo um bloco, ou linha da página, enquanto que tags inline como <span>, ocupam somente o seu conteúdo.

• Exemplo

Table

A forma mais usada antigamente para posicionar melhor os elementos HTML, hoje já quase extinta: <table></table>

Tableless

Usando as propriedades float e clear, para que os elementos mudem de posição na tela

• Exemplo

Flexbox

A caixa que referenciarmos como display: flex, poderemos posicionar melhor os seus elementos internos (filhos):

• Alinhamento
• Ordenação
• Tamanho Flexíveis

Sempre em uma só dimensão, horizontal OU vertical

<aside> 🚧 O Flex vai sempre obedecer o que nós determinarmos o que será o Eixo Principal (row ou column)

</aside>

Terminologia Flex

Propriedades do Flex Container

1. Direção dos Itens - flex-direction

   • Values

2. Múltiplas Linhas - flex-wrap

   Destrava os valores:

   • nowrap (default)
   • wrap
   • wrap-reverse
   • Se necessário, ele criará novos Axis, novas linhas
   • É importante entender que é como se passasse a existir um novo flex-container. Observe o caso de atribuirmos o wrap em um container e depois colocar os itens no centro