Quali sono i valori consentiti della proprietà `display` per un articolo flessibile? (il layout dei bambini di Flex-item è irrilevante)

Tutti i bambini di un contenitore flessibile (designato da display: flex o display: inline-flex ) sono prodotti automaticamente in flex. Non esiste alcuna proprietà di visualizzazione per un articolo flessibile; invece, lo impostiamo su un altro valore, a seconda di come vogliamo che i figli dell’elemento flessibile siano disposti.

Quindi, se imposto la display sul valore X sull’elemento Y (tenendo conto che Y partecipa a un contesto flessibile, cioè Y è un object flessibile) posso essere sicuro che otterrò sempre l’elemento flessibile che si comporta ( in questo contesto di formattazione, nel contenitore flessibile) come un elemento a livello di blocco?

(In altre parole, Y partecipa a un contesto di formattazione del blocco indipendentemente dal fatto che X = blocco / in linea / tabella-cella / inline-grid / … ecc., Giusto?)

  • X – valore non blocco
  • Y – flex-item, elemento html

Questo:

 
item

uguale a questo (senza effetti collaterali)

 
item

L’unica condizione per essere un articolo flessibile è essere un figlio in stream di un contenitore flessibile.

Nota: ciò significa che una sequenza di testo contigua può essere racchiusa all’interno di un elemento flex anonimo che non corrisponde a nessun elemento e un elemento figlio di un contenitore flessibile potrebbe non essere un elemento flessibile se uno dei seguenti

  • È assolutamente posizionato

    un bambino assolutamente posizionato di un contenitore flessibile non partecipa al layout flessibile.

  • Ha display: contents

    L’elemento stesso non genera alcuna casella, ma i suoi figli e gli pseudo-elementi generano ancora le caselle normalmente. Ai fini della generazione e del layout della scatola, l’elemento deve essere trattato come se fosse stato sostituito con i suoi figli e gli pseudo-elementi nell’albero del documento.

    I suoi figli diventeranno invece gli elementi flessibili (a meno che qualcosa di questo elenco non si applichi a loro).

  • Ha display: none

    L’elemento e i suoi discendenti non generano scatole.

  • Ha box-suppress: discard

    L’elemento non genera affatto scatole.

  • Ha box-suppress: hide

    L’elemento genera le caselle normalmente, ma quelle caselle non partecipano al layout in alcun modo e non devono essere visualizzate.

  • In precedenza, se un figlio di un contenitore flessibile aveva un valore di display che generava un genitore anonimo, quel genitore divenne l’elemento flessibile invece del figlio. Questo è cambiato e ora il bambino diventa l’elemento flessibile e non viene generato alcun genitore.

A parte questo, sì, il valore display non dovrebbe impedire a un elemento di essere un elemento flessibile.

Siate consapevoli che gli elementi flessibili sono bloccati , quindi ad esempio inline-block diventa block , inline-table diventa table , inline-flex diventa flex , ecc.

Ciò significa che, indipendentemente dal ruolo di visualizzazione esterno specificato, l’elemento flessibile sarà sempre a livello di blocco.

Fondamentalmente, la proprietà display , quando usata su un elemento flessibile, è utile solo per impostare il suo modello di layout di visualizzazione interno , ad esempio che si desidera che l’elemento flessibile sia un contenitore flessibile per il suo contenuto.

Un elemento flessibile stabilisce un nuovo contesto di formattazione per i suoi contenuti. Il tipo di questo contesto di formattazione è determinato dal suo valore di display , come al solito. Tuttavia, gli elementi flessibili stessi sono riquadrati a livello di flessibilità , non a livello di blocco: partecipano al contesto di formattazione flessibile del loro contenitore, non in un contesto di formattazione dei blocchi.

(La terminologia differisce leggermente, la specifica Display dice che un elemento flessibile è a livello di blocco nel senso del suo ruolo di visualizzazione esterno, la specifica di Flexbox dice che non è a livello di blocco nel senso che il contesto di formattazione a cui partecipa non è un bloccare uno)