Perché non è ansible essere contenitori flessibili?

Ho provato a fieldset un elemento fieldset con display: flex e display: inline-flex .

Tuttavia, non ha funzionato: flex comportato come un block e inline-flex comportato come inline-block .

Questo accade sia su Firefox che su Chrome, ma stranamente funziona su IE.

E ‘un errore? Non ho potuto trovare che fieldset dovrebbe avere alcun comportamento speciale, né in HTML5 né nelle specifiche del layout flessibile CSS .

 fieldset, div { display: flex; border: 1px solid; } 
 

foo

bar

foo

bar

Secondo Bug 984869 – display: flex non funziona per gli elementi dei pulsanti ,

non è implementabile (dai browser) in puro CSS, quindi sono un po ‘una scatola nera, dal punto di vista dei CSS. Ciò significa che non reagiscono necessariamente nello stesso modo in cui, ad esempio, un

farebbe.

Questo non è specifico per la flexbox – ad esempio non eseguiamo il rendering di barre di scorrimento se si inserisce un overflow:scroll su un pulsante e non lo si renderà come tabella se si inserisce la display:table su di essa.

Facendo un passo indietro, questo non è specifico per . Prendi in considerazione

e

che hanno anche un comportamento di rendering speciale:

 data:text/html,
abc
def

In questi casi, Chrome è d’accordo con noi e ignora la modalità di visualizzazione flex . (come rivelato dal fatto che “abc” e “def” finiscono per essere impilati verticalmente). Il fatto che capiti di fare ciò che ti aspetti con è probabilmente dovuto a un dettaglio di implementazione.

Nell’implementazione del pulsante di Gecko, abbiamo hardcode (e

, e

) come aventi una specifica class frame (e quindi, un modo specifico di disporre gli elementi figlio), indipendentemente dalla proprietà display .

Se vuoi affidare in modo affidabile i bambini in modo affidabile in una particolare modalità di layout in modalità cross-browser, la soluzione migliore è utilizzare un wrapper-div all’interno del pulsante, proprio come se fosse necessario all’interno di una

o un

.

Pertanto, quel bug è stato contrassegnato come “risolto non valido”.

C’è anche Bug 1047590 – display: flex; non funziona in

, attualmente “non confermato”.


Buone notizie : Firefox 46+ implementa Flexbox per

. Vedi bug 1230207 .

Ho scoperto che potrebbe trattarsi di un bug su Chrome e Firefox in cui la legend e il fieldset sono elementi sostituiti .

Segnalazioni di errori:

Bug Chrome
Bug di Firefox

Una soluzione ansible:

Una soluzione ansible sarebbe utilizzare

in HTML e applicare in CSS div[role='group'] come selettore.

Nella mia esperienza, ho trovato che né

, né , né possono usare correttamente display:flex o proprietà ereditate.

Come altri hanno già menzionato, sono stati segnalati bug. Se vuoi usare flexbox per controllare l’ordine (ad es. order:2 ), allora dovresti avvolgere l’elemento in un div. Se si desidera che il flexbox controlli il layout e le dimensioni effettive, si consiglia di prendere in considerazione l’utilizzo di un div, anziché del controllo di input (che puzza, lo so).

 

foo

bar

foo

bar

Potrebbe essere necessario utilizzare il gruppo di ruoli perché firefox, chrome e penso che i safari abbiano un bug con i field apparentemente. Quindi il selettore nel CSS sarebbe semplicemente

 div[role='group'], div { display: flex; border: 1px solid; } 

Modifica: qui ci sono alcuni problemi che anche altre persone stanno vivendo.

Numero 375693

Numero 262679

puoi inserire div aggiuntivi in

con i seguenti oggetti di scena:

 flex-inner-wrapper { display: inherit; flex-flow: inherit; justify-content: inherit; align-items: inherit; }