La nature déroutante des éléments flexibles : niveau bloc ou niveau flexible ?

La question de savoir si les éléments flexibles sont au niveau bloc a été un sujet de discussion débat parmi les développeurs CSS. Le module CSS Flexible Box Layout Niveau 1 indique que les éléments flexibles sont au niveau flexible et non au niveau du bloc. Cependant, une section ultérieure suggère que les valeurs d'affichage des éléments flexibles sont « bloquées ». Cela soulève la question : les éléments flexibles sont-ils au niveau du bloc après tout ?

Pour comprendre l'écart, il est crucial de comprendre le concept de affichage en CSS. Chaque élément possède une propriété d'affichage qui définit la façon dont il est présenté. Pour les éléments flexibles, la valeur d'affichage est initialement définie sur « bloquer ». Cela signifie que si la propriété inline d'un élément flexible est définie sur une autre valeur, telle que inline-block, elle sera automatiquement convertie en block. C'est ce qu'on appelle le blocage.

Par conséquent, même si les éléments flexibles sont intrinsèquement considérés comme des boîtes de niveau flexible, leur valeur d'affichage est bloquée. Cela n’en fait pas des boîtes de niveau bloc au sens traditionnel du terme. Ils restent des boîtes de niveau flexible mais se comportent comme des éléments de bloc dans leur propre contexte de formatage.

Pour résumer, les éléments flexibles existent au niveau flexible, mais leur valeur d'affichage est bloquée. Cette distinction leur permet de participer au formatage flexible tout en agissant également comme éléments de bloc pour les éléments qu'ils contiennent. Comprendre ce concept est crucial pour une mise en page et un style CSS précis.