Ce face align-self
Dacă părintele are align-items: center, dar vrei ca un singur buton din rând să stea lipit de marginea de jos, aplici align-self: flex-end direct pe acel element copil.
Permite derogări precise de la regula generală a containerului fără a sparge structura restului de elemente.
Valori uzuale
| Valoare | Descriere |
|---|---|
auto |
Implicit: respectă align-items-ul părintelui. |
flex-start |
Se aliniază la începutul axei secundare. |
center |
Se centrează individual. |
flex-end |
Se aliniază la final. |
stretch |
Se întinde pe toată înălțimea. |
Exemple
Exemplul 1: Un buton dintr-un card flexibil împins la fundul casetei
align-self permite butonului să se poziționeze diferit față de restul textului.
.card {
display: flex;
flex-direction: column;
height: 350px;
}
.buton-actiune {
margin-top: auto; /* împinge butonul la bază */
align-self: flex-start;
}Efect vizual în browser
Butonul stă așezat frumos la baza cardului, aliniat la marginea stângă.Greșeli frecvente
- Aplicarea lui align-self pe containerul părinte; align-self este o proprietate care se aplică exclusiv pe elementul copil (flex item).
Comenzi înrudite
align-items: Aliniază elementele de-a lungul axei secundare / transversale (vertical când flex-direction este row).display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.flex (grow, shrink, basis): Scurtătură aplicată pe un element copil flex pentru a controla creșterea (grow), micșorarea (shrink) și mărimea de bază (basis).