Il problema
Flexbox rende il centraggio molto semplice.
Semplicemente applicando align-items: centere justify-content: centeral contenitore flessibile, i tuoi articoli flessibili saranno centrati verticalmente e orizzontalmente.
Tuttavia, esiste un problema con questo metodo quando l'elemento flessibile è più grande del contenitore flessibile.
Come notato nella domanda, quando l'elemento flessibile trabocca il contenitore, la parte superiore diventa inaccessibile.
Per l'overflow orizzontale, la sezione sinistra diventa inaccessibile (o la sezione destra, nelle lingue RTL).
Ecco un esempio con un contenitore LTR con justify-content: centertre elementi flessibili:
Vedi il fondo di questa risposta per una spiegazione di questo comportamento.
Soluzione n. 1
Per risolvere questo problema, utilizzare i margini automatici di flexbox , anziché justify-content.
Con i automargini, un elemento flessibile traboccante può essere centrato verticalmente e orizzontalmente senza perdere l'accesso a qualsiasi parte di esso.
Quindi, invece di questo codice sul contenitore flessibile:
#flex-container {
align-items: center;
justify-content: center;
}
Usa questo codice sull'elemento flessibile:
.flex-item {
margin: auto;
}
Demo rivista
Soluzione n. 2 (non ancora implementata nella maggior parte dei browser)
Aggiungi il safevalore alla regola di allineamento delle parole chiave, in questo modo:
justify-content: safe center
o
align-self: safe center
Dalle specifiche del modulo di allineamento box CSS :
4.4. Overflow Allineamento: l' safee unsafeparole chiave e limiti di sicurezza di scorrimento
Quando [l'elemento flessibile] è più grande del [contenitore flessibile], trabocca. Alcune modalità di allineamento, se rispettate in questa situazione, possono causare la perdita di dati: ad esempio, se i contenuti di una barra laterale sono centrati, quando traboccano possono inviare parte delle loro caselle oltre il bordo iniziale della finestra, che non può essere fatto scorrere fino a .
Per controllare questa situazione, è possibile specificare esplicitamente una modalità di allineamento di overflow . UnsafeL'allineamento rispetta la modalità di allineamento specificata in situazioni di overflow, anche se causa la perdita di dati, mentre l' safeallineamento modifica la modalità di allineamento in situazioni di overflow nel tentativo di evitare la perdita di dati.
Il comportamento predefinito consiste nel contenere l'oggetto di allineamento all'interno dell'area scorrevole, sebbene al momento della stesura di questa funzione di sicurezza non sia ancora implementata.
safe
Se la dimensione dell '[oggetto flessibile] trabocca nel [contenitore flessibile], l' [elemento flessibile] viene invece allineato come se la modalità di allineamento fosse [ flex-start].
unsafe
Indipendentemente dalle dimensioni relative di [oggetto flessibile] e [contenitore flessibile], il valore di allineamento indicato viene rispettato.
Nota: il Box Alignment Module può essere utilizzato su più modelli di layout box, non solo flessibile. Quindi, nell'estratto della specifica sopra, i termini tra parentesi indicano in realtà "oggetto di allineamento", "contenitore di allineamento" e " start". Ho usato termini specifici di flex per focalizzarmi su questo particolare problema.
Spiegazione per la limitazione di scorrimento da MDN:
Considerazioni sugli articoli Flex
Le proprietà di allineamento di Flexbox eseguono un centraggio "vero", a differenza di altri metodi di centraggio nei CSS. Ciò significa che gli oggetti flessibili rimarranno centrati, anche se traboccano il contenitore flessibile.
Questo a volte può essere problematico, tuttavia, se traboccano oltre il bordo superiore della pagina o il bordo sinistro [...], poiché non è possibile scorrere fino a quell'area, anche se è presente del contenuto!
In una versione futura, le proprietà di allineamento verranno estese per avere anche un'opzione "sicura".
Per ora, se questo è un problema, puoi invece utilizzare i margini per raggiungere il centraggio, in quanto risponderanno in modo "sicuro" e smetteranno di centrare se traboccano.
Invece di usare le align-proprietà, basta mettere i automargini sugli oggetti flessibili che si desidera centrare.
Invece delle justify-proprietà, metti i margini automatici sui bordi esterni del primo e dell'ultimo oggetto flessibile nel contenitore flessibile.
I automargini "flettono" e assumono lo spazio rimanente, centrando gli elementi flessibili quando c'è spazio rimanente e passando all'allineamento normale quando no.
Tuttavia, se stai cercando di sostituire justify-contentcon la centratura basata sui margini in un flexbox multilinea, probabilmente sei sfortunato, poiché è necessario posizionare i margini sul primo e sull'ultimo elemento flessibile su ogni riga. A meno che non sia possibile prevedere in anticipo quali elementi finiranno su quale riga, non è possibile utilizzare in modo affidabile la centratura basata sui margini nell'asse principale per sostituire la justify-contentproprietà.