Flexbox – właściwość align-self [CSS]

Kategoria wpisu Flexbox, Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 1 minute

To już kolejna część kursu poświęconemu Flexbox – do wcześniejszych części linki znajdziecie w prawej kolumnie. Dlatego też nie będę zbyt dużo czasu poświęcać na wprowadzenie. Polecam za to zapoznać się z poprzednimi częściami kursu.

O właściwości align-self

W tej części zajmiemy się właściwością align-self. Właściwość ta określa wyrównanie dla wybranego elementu wewnątrz elastycznego kontenera. Właściwość align-self zastępuje właściwość align-items elementu kontenera elastycznego.

align-self przyznaje następujące cechy:

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Przykłady działania:

kol 1
kol 2
kol 3

Ogólny kod CSS dla przykładu:

HTML przepytuje się za to następująco:

W przykładach specjalnie nie będziemy ingerować w kod HTML zmienimy jedynie wartość omawianej właściwości.


Przykładowe zastosowanie: align-self: flex-start;

kol 1
kol 2
kol 3

Przykładowe zastosowanie: align-self: center;

kol 1
kol 2
kol 3

Przykładowe zastosowanie: align-self: baseline;

kol 1
kol 2
kol 3

Przykładowe zastosowanie: align-self: stretch;

kol 1
kol 2
kol 3

 

Podsumowanie

Mam nadzieję, że wpis okaże się dla was pomocny. Oceniając go wato pamiętać, że jest on częścią większej całości i sporo informacji pominęłam.

Jeżeli chcecie bym kontynuowała kurs z flexbox informację o tym możecie umieścić w formie komentarza. Pod

źródła:
https://www.w3schools.com/cssref/css3_pr_align-self.asp

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *