CSS: O Guia Definitivo, 5ª Edição

Capítulo 11. Layout de caixa flexível

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

O CSS Flexible Box Module Level 1, ou flexbox para abreviar, torna quase simples as tarefas outrora difíceis de dispor certos tipos de páginas, widgets, aplicações e galerias. Com o flexbox, muitas vezes não precisa de uma estrutura CSS. Neste capítulo, aprenderá a utilizar apenas algumas linhas de CSS para criar quase todas as funcionalidades que o seu site requer.

Fundamentos do Flexbox

O Flexbox é uma forma simples e poderosa de dispor os componentes da página, ditando a forma como o espaço é distribuído, o conteúdo é alinhado e os elementos são ordenados visualmente. O conteúdo pode ser facilmente organizado vertical ou horizontalmente, e pode ser disposto ao longo de um único eixo ou em várias linhas. E muito, muito mais.

Com o flexbox, o aspeto do conteúdo pode ser independente da ordem da fonte. Embora visualmente alteradas, as propriedades flexíveis não devem afetar a ordem do conteúdo lido pelosleitores de ecrã.

Aviso

As especificações dizem que os leitores de ecrã devem seguir a ordem da fonte, mas, desde finais de 2022, o Firefox segue a ordem visual. No momento em que escrevo este artigo, uma proposta exige a adição de uma propriedade CSS que especifica se deve seguir a ordem de origem ou visual, por isso, em breve, poderá ser possível decidires por ti próprio.

Talvez o mais importante seja que, com layouts ...