A natureza desconcertante dos itens flexíveis: bloco ou nível flexível?

A questão de saber se os itens flexíveis são de nível de bloco tem sido um tópico de debate entre desenvolvedores CSS. O módulo de layout de caixa flexível CSS nível 1 afirma que os itens flexíveis estão no nível flexível e não no nível do bloco. No entanto, uma seção posterior sugere que os valores de exibição dos itens flexíveis são "bloqueados". Isso levanta a questão: afinal, os itens flexíveis são nível de bloco?

Para entender a discrepância, é crucial entender o conceito de display em CSS. Cada elemento possui uma propriedade display que define como ele é apresentado. Para itens flexíveis, o valor de exibição é inicialmente definido como "bloquear". Isso significa que se a propriedade inline de um item flexível for definida com outro valor, como inline-block, ele será automaticamente convertido para block. Isso é conhecido como bloqueio.

Portanto, embora os itens flexíveis sejam inerentemente considerados caixas de nível flexível, seu valor de exibição é bloqueado. Isso não os torna caixas em nível de bloco no sentido tradicional. Eles permanecem caixas de nível flexível, mas se comportam como elementos de bloco dentro de seu próprio contexto de formatação.

Para resumir, os itens flexíveis existem no nível flexível, mas seu valor de exibição é bloqueado. Essa distinção permite que eles participem da formatação flexível e, ao mesmo tempo, atuem como elementos de bloco para os elementos contidos. Compreender esse conceito é crucial para um layout e estilo CSS precisos.