Autor publikacji: Virtual Patriot - Administrator

align-self

Data publikacji: Listopad 16 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - align-self property (LV3)

Przeznaczenie właściwości `align-self`

Za pomocą właściwości align-self możemy określić sposób wyrównania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki. Wspomniane wyrównywanie elementu HTML należącego do siatki elementu HTML tworzącego układ siatki dokonuje się względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany dany element HTML.

Informacje dodatkowe

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

gdy element HTML należący do siatki elementu HTML tworzącego układ siatki w jakikolwiek sposób został wyrównany za pomocą wartości auto właściwości margin względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany, wtedy właściwość align-self nie daje żadnego widocznego efektu dla danego elementu HTML

Informacje techniczne o właściwości `align-self`

przeznaczenie

element dziecko elementu HTML typu grid
element dziecko elementu HTML typu inline-grid

pozycja

static, relative

Właściwość "align-self" oddziałuje również na element HTML posiadający pozycję absolute, lecz tylko wtedy, gdy elementem HTML (względem którego odbywa się pozycjonowanie danego elementu HTML posiadającego pozycję absolute) jest element HTML typu grid lub inline-grid. W tym wypadku przeznaczeniem właściwości "align-self" jest również element potomek elementu HTML typu grid lub inline-grid.

nie

brak

tak (animacja schodkowa)

Interpretacja właściwości `align-self`

: tak
: tak
: tak
: tak
: nie
: tak

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

auto

Wyjaśnienie

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

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

Przykład

  align-self:auto;

div-1

div-2

div-3

div-4

Do przykładowego elementu "div#gridbox" 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#gridbox" jest również wartość "center", a co za tym idzie drugi element dziecko przykładowego elementu "div#gridbox" został wyśrodkowany względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany.

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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        align-items:center;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        align-self:stretch;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        align-self:stretch;
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        align-self:stretch;
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

normal

Wyjaśnienie

Wartość normal właściwości align-self elementu HTML należącego do siatki elementu HTML typu grid lub inline-grid działa na takiej samej zasadzie jak wartość stretch (lub na takiej samej zasadzie jak wartość start, gdy element HTML należący do siatki elementu HTML tworzącego układ siatki, dodatkowo reprezentuje treść zewnętrzną (plik graficzny, plik audio, plik video itp.)).

Przykład

  align-self:normal;

div-1

div-2

div-3

div-4

Ze względu na to, iż przykładowy element "div#gridbox" jest typu "grid" wartość "normal" właściwości "align-self", która została dodana do drugiego dziecka przykładowego elementu "div#gridbox" działa na takiej samej zasadzie jak wartość "stretch", a co za tym idzie rozmiar wysokości obszaru zawartości drugiego elementu dziecka przykładowego elementu "div#gridbox" został rozciągnięty względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany.

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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        align-items:center;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        align-self:normal;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

start

Wyjaśnienie

Za pomocą wartości start właściwości align-self możemy sprawić, że interesujący nas element HTML należący do siatki elementu HTML tworzącego układ siatki zostanie wyrównany w kierunku początkowej krawędzi wierszowej miejsca, do którego został przypisany.

Przykład

  align-self:start;

div-1

div-2

div-3

div-4

Drugi element dziecko przykładowego elementu "div#gridbox" został wyrównany w kierunku początkowej krawędzi wierszowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "align-self" wraz z wartością "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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        align-self:start;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

end

Wyjaśnienie

Za pomocą wartości end właściwości align-self możemy sprawić, że interesujący nas element HTML należący do siatki elementu HTML tworzącego układ siatki zostanie wyrównany w kierunku końcowej krawędzi wierszowej miejsca, do którego został przypisany.

Przykład

  align-self:end;

div-1

div-2

div-3

div-4

Drugi element dziecko przykładowego elementu "div#gridbox" został wyrównany w kierunku końcowej krawędzi wierszowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "align-self" wraz z wartością "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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        align-self:end;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

center

Wyjaśnienie

Za pomocą wartości center właściwości align-self możemy sprawić, że interesujący nas element HTML należący do siatki elementu HTML tworzącego układ siatki zostanie wyśrodkowany względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany.

Przykład

  align-self:center;

div-1

div-2

div-3

div-4

Drugi element dziecko przykładowego elementu "div#gridbox" został wyśrodkowany względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" 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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        align-self:center;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

self-start

Wyjaśnienie

Za pomocą wartości self-start właściwości align-self możemy sprawić, że interesujący nas element HTML należący do siatki elementu HTML tworzącego układ siatki zostanie wyrównany w kierunku tej krawędzi wierszowej miejsca, do którego został przypisany, która to krawędź wierszowa znajduje się bliżej początku tej osi interesującego nas elementu HTML, która to oś znajduje się na osi blokowej elementu HTML tworzącego dany układ siatki.

Przykład

  align-self:self-start;

div-1

div-2

div-3

div-4

Drugi element dziecko przykładowego elementu "div#gridbox" został wyrównany w kierunku początkowej krawędzi wierszowej miejsca, do którego został przypisany, gdyż wspomniana początkowa krawędź wierszowa znajduje się bliżej początku znajdującej się na osi blokowej przykładowego elementu "div#gridbox" osi blokowej drugiego elementu dziecka przykładowego elementu "div#gridbox", ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "align-self" wraz z wartością "self-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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        align-self:self-start;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

self-end

Wyjaśnienie

Za pomocą wartości self-end właściwości align-self możemy sprawić, że interesujący nas element HTML należący do siatki elementu HTML tworzącego układ siatki zostanie wyrównany w kierunku tej krawędzi wierszowej miejsca, do którego został przypisany, która to krawędź wierszowa znajduje się bliżej końca tej osi interesującego nas elementu HTML, która to oś znajduje się na osi blokowej elementu HTML tworzącego dany układ siatki.

Przykład

  align-self:self-end;

div-1

div-2

div-3

div-4

Drugi element dziecko przykładowego elementu "div#gridbox" został wyrównany w kierunku początkowej krawędzi wierszowej miejsca, do którego został przypisany, gdyż wspomniana początkowa krawędź wierszowa znajduje się bliżej końca znajdującej się na osi blokowej przykładowego elementu "div#gridbox" osi liniowej drugiego elementu dziecka przykładowego elementu "div#gridbox", ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "align-self" wraz z wartością "self-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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        align-self:self-end;
        direction:rtl;
        writing-mode:vertical-rl;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

stretch

Wyjaśnienie

Za pomocą wartości stretch właściwości align-self możemy sprawić, że interesujący nas element HTML należący do siatki elementu HTML tworzącego układ siatki zostanie wyrównany w stylu stretch. Styl stretch oznacza, że jeżeli pomiędzy początkową oraz końcową krawędzią wierszową miejsca, do którego został przypisany dany element HTML, pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni zostanie dokonane rozciągnięcie, znajdującego się pomiędzy wspomnianą początkową oraz końcową krawędzią wierszową miejsca, rozmiaru obszaru zawartości danego elementu HTML.

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

Przykład

  align-self:stretch;

div-1

div-2

div-3

div-4

Rozmiar wysokości obszaru zawartości drugiego elementu dziecka przykładowego elementu "div#gridbox" został rozciągnięty względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" 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;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(4, 100px);
        grid-template-columns:repeat(4, 100px);
        align-items:center;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:3;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        align-self:stretch;
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:3;
        grid-column-end:5;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:1;
        grid-column-end:3;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:5;
        grid-column-start:3;
        grid-column-end:5;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>