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

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:

Ogólny kod CSS dla przykładu:

.flex-container {
  display: flex;
  background-color: #f1f1f1;
  height: 300px;
}

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

<div class="flex-container">
<div>kol 1</div>
<div class="auto">kol 2</div>
<div>kol 3</div>
</div>

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

See the Pen
Untitled by Aura (@Julka85)
on CodePen.0

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.

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