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ć jeden ze sposobów wyrównania interesującego nas elementu HTML. Mowa tu o elemencie dziecku elementu HTML tworzącego układ elastyczny.

Jeżeli element HTML posiada właściwość margin wraz z wartością auto, która sprawia, że dany element HTML musi zmienić swoje położenie względem krawędzi, z których korzysta właściwość "align-self", wtedy właściwość "align-self" nie daje żadnego widocznego efektu dla danego elementu HTML.

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

przeznaczenie
  • element dziecko elementu HTML typu flex
  • element dziecko elementu HTML typu inline-flex
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • tak

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

Zobacz więcej informacji o interpretacji właściwości .

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 HTML wskazuje na wartość, jaką posiada właściwość align-items elementu rodzica wspomnianego elementu HTML.

Przykład

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" wszystkich elementów dzieci przykładowego elementu "div#flexbox" jest również wartość "center", a co za tym idzie elementy dzieci przykładowego elementu "div#flexbox" zostały wyśrodkowane względem górnej oraz dolnej krawędzi obszaru zawartości 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;
        justify-content:center;
        align-items:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        font-size:1.2em;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </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 interesujący nas element HTML zostanie wyrównany w kierunku tej krawędzi obszaru zawartości swojego elementu rodzica, do której przylega razem z pozostałymi elementami dziećmi.

Przykład

div - 1
div - 2
div - 3

Drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany w kierunku górnej krawędzi obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego elementu 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;
        justify-content:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        align-self:flex-start;
        font-size:1.2em;
        background-color:red;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </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 interesujący nas element HTML zostanie wyrównany w kierunku tej krawędzi obszaru zawartości swojego elementu rodzica, która jest krawędzią przeciwną do krawędzi, na którą wskazuje wartość flex-start.

Przykład

div - 1
div - 2
div - 3

Drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany w kierunku dolnej krawędzi obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego elementu 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;
        justify-content:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        align-self:flex-end;
        font-size:1.2em;
        background-color:red;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </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 interesujący nas element HTML zostanie wyśrodkowany względem dwóch krawędzi obszaru zawartości swojego elementu rodzica (mowa tu o tych krawędziach, na które wskazuje wartość flex-start oraz wartość flex-end).

Przykład

div - 1
div - 2
div - 3

Drugi element dziecko przykładowego elementu "div#flexbox" został wyśrodkowany względem górnej oraz dolnej krawędzi obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego elementu 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;
        justify-content:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        align-self:center;
        font-size:1.2em;
        background-color:red;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

baseline

Opis

Za pomocą wartości baseline właściwości align-self możemy sprawić, że interesujący nas element HTML zostanie wyrównany do linii bazowej wiersza, do którego należy.

Jeżeli element HTML występuje w kolumnie, wtedy wartość "baseline" działa na ten element HTML na takiej samej zasadzie jak wartość flex-start.

Przykład

div - 1
div - 2
div - 3

Drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany do linii bazowej pierwszego wiersza przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" wraz z wartością "baseline".

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;
        justify-content:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        align-self:baseline;
        font-size:1.2em;
        background-color:red;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </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 interesujący nas element HTML zostanie wyrównany naraz w kierunku dwóch krawędzi obszaru zawartości swojego elementu rodzica (mowa tu o tych krawędziach, na które wskazuje wartość flex-start oraz wartość flex-end). Wspomniane wyrównanie spowoduje rozciągnięcie jednego z rozmiarów obszaru zawartości wspomnianego elementu HTML.

Jeżeli element HTML posiada stały rozmiar obszaru zawartości (mowa tu o tym rozmiarze, który jest rozciągany przez wartość "stretch"), wtedy wartość "stretch" działa na ten element HTML na takiej samej zasadzie jak wartość flex-start.

Przykład

div - 1
div - 2
div - 3

Drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany naraz w kierunku górnej oraz dolnej krawędzi obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego elementu 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;
        justify-content:center;
        align-items:flex-end;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        align-self:stretch;
        font-size:1.2em;
        background-color:red;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>