Ostatnio edytowany:

align-self

Autor: Virtual Patriot

Opis właściwości align-self

Za pomocą właściwości align-self możemy określić sposób wyrównania znajdującego się w anonimowym bloku interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny. Wspomniane wyrównywanie elementu dziecka dokonuje się wzdłuż osi poprzecznej elementu rodzica tworzącego układ elastyczny oraz w obszarze anonimowego bloku.

Informacje dodatkowe

właściwość align-self ma pierwszeństwo przed właściwością align-items

gdy znajdujący się w obszarze anonimowego bloku dany element dziecko w jakikolwiek sposób został wyrównany za pomocą wartości auto właściwości margin wzdłuż osi poprzecznej elementu rodzica tworzącego układ elastyczny, wtedy właściwość align-self nie daje żadnego widocznego efektu dla danego elementu dziecka

Dodatkowe techniczne informacje o właściwości align-self

przeznaczenie
  • element dziecko elementu HTML typu flex
  • element dziecko elementu HTML typu inline-flex
pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości align-self

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie (interpretuje od wersji 11, lecz z wieloma możliwymi błędami)

Edge

tak

Opis wartości właściwości align-self

auto

Opis

Wartość auto jest domyślną wartością właściwości align-self.

Wartość auto właściwości align-self elementu dziecka elementu HTML tworzącego układ elastyczny wskazuje na wartość, jaką posiada właściwość align-items elementu HTML tworzącego dany układ elastyczny.

Przykład

  align-self:auto;
div - 1
div - 2
div - 3

Do przykładowego elementu "div#flexbox" została dodana właściwość "align-items" wraz z wartością "center", dzięki czemu wartością domyślną właściwości "align-self" drugiego elementu dziecka przykładowego elementu "div#flexbox" jest również wartość "center", a co za tym idzie znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyśrodkowany w obszarze anonimowego bloku względem początku oraz końca osi poprzecznej przykładowego elementu "div#flexbox".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        align-items:center;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        align-self:stretch;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        align-self:stretch;
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

normal

Opis

Wartość normal właściwości align-self elementu dziecka elementu HTML typu flex lub inline-flex działa na takiej samej zasadzie jak wartość stretch.

Przykład

  align-self:normal;
div - 1
div - 2
div - 3

Ze względu na to, iż przykładowy element "div#flexbox" jest typu "flex" wartość "normal" właściwości "align-self", która została dodana do drugiego dziecka przykładowego elementu "div#flexbox" działa na takiej samej zasadzie jak wartość "stretch", a co za tym idzie rozmiar wysokości obszaru zawartości znajdującego się w anonimowym bloku drugiego elementu dziecka przykładowego elementu "div#flexbox" został rozciągnięty w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        align-items:center;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        align-self:normal;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

flex-start

Opis

Za pomocą wartości flex-start właściwości align-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyrównany w obszarze wspomnianego anonimowego bloku wzdłuż osi poprzecznej, w kierunku początku tejże osi poprzecznej.

Przykład

  align-self:flex-start;
div - 1
div - 2
div - 3

Znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", w kierunku początku osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" wraz z wartością "flex-start".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        align-self:flex-start;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

flex-end

Opis

Za pomocą wartości flex-end właściwości align-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyrównany w obszarze wspomnianego anonimowego bloku wzdłuż osi poprzecznej, w kierunku końca tejże osi poprzecznej.

Przykład

  align-self:flex-end;
div - 1
div - 2
div - 3

Znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", w kierunku końca osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" wraz z wartością "flex-end".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        align-self:flex-end;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

center

Opis

Za pomocą wartości center właściwości align-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyśrodkowany w obszarze wspomnianego anonimowego bloku względem początku oraz końca osi poprzecznej.

Przykład

  align-self:center;
div - 1
div - 2
div - 3

Znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyśrodkowany w obszarze anonimowego bloku względem początku oraz końca osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" wraz z wartością "center".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        align-self:center;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

stretch

Opis

Za pomocą wartości stretch właściwości align-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyrównany w stylu stretch. Styl stretch oznacza, że jeżeli wzdłuż osi poprzecznej w obszarze anonimowego bloku, w którym znajduje się dany element dziecko, pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni w obszarze anonimowego bloku zostanie dokonane rozciągnięcie znajdującego się na wspomnianej osi poprzecznej rozmiaru obszaru zawartości elementu dziecka.

Rozmiar szerokości obszaru zawartości elementu dziecka może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości width elementu dziecka jest wartość auto, natomiast rozmiar wysokości obszaru zawartości elementu dziecka może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości height elementu dziecka jest wartość auto. Gdy docelowy rozmiar obszaru zawartości danego elementu dziecka elementu HTML tworzącego układ elastyczny nie może zostać rozciągnięty, wtedy wartość "stretch" dla danego elementu dziecka działa na takiej samej zasadzie jak wartość flex-start.

Przykład

  align-self:stretch;
div - 1
div - 2
div - 3

Rozmiar wysokości obszaru zawartości znajdującego się w anonimowym bloku drugiego elementu dziecka przykładowego elementu "div#flexbox" został rozciągnięty w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" wraz z wartością "stretch".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        align-items:center;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        align-self:stretch;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>