La align-selfproprietà è una proprietà secondaria del modulo Layout riquadro flessibile.
Rende possibile sovrascrivere il align-itemsvalore per elementi flessibili specifici.
La align-selfproprietà accetta gli stessi 5 valori di align-items:
flex-start: il bordo del margine di partenza incrociato dell'articolo viene posizionato sulla linea di partenza incrociataflex-end: il bordo del margine di estremità trasversale dell'articolo viene posizionato sulla linea di estremità trasversalecenter: l'elemento è centrato sull'asse trasversalebaseline: gli elementi sono allineati come la loro linea di base è allineatastretch(predefinito): allunga per riempire il contenitore (rispetta comunque larghezza minima / larghezza massima)
Sintassi
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demo
La seguente demo mostra come un elemento può allinearsi nel contenitore flessibile a seconda del align-selfvalore:
- Il primo elemento è impostato su
flex-start - La seconda voce è impostata su
flex-end - Il terzo elemento è impostato su
center - Il quarto elemento è impostato su
baseline - Il 5 ° elemento è impostato su
stretch
Guarda la demo di Pen align-self di CSS-Tricks (@ css-tricks) su CodePen.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Per ulteriori informazioni su come mescolare le sintassi per ottenere il miglior supporto del browser, fare riferimento a questo articolo (CSS-Tricks) o questo articolo (DevOpera).