Autor publikacji
Virtual Patriot - Administrator

justify-self

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości justify-self

Za pomocą właściwości justify-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 kolumnowej miejsca, do którego został przypisany dany element HTML.

Informacje dodatkowe

właściwość justify-self ma pierwszeństwo przed właściwością justify-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 kolumnowej miejsca, do którego został przypisany, wtedy właściwość justify-self nie daje żadnego widocznego efektu dla danego elementu HTML

Informacje techniczne o właściwości justify-self

przeznaczenie

  • element dziecko elementu HTML typu grid

  • element dziecko elementu HTML typu inline-grid

pozycja

static, relative

Właściwość "justify-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 "justify-self" jest również element potomek elementu HTML typu grid lub inline-grid.

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości justify-self

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

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

auto

Wyjaśnienie

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

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

Przykład

  justify-self:auto;
div-1
div-2
div-3
div-4

Do przykładowego elementu "div#gridbox" została dodana właściwość "justify-items" wraz z wartością "center", dzięki czemu wartością domyślną właściwości "justify-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 kolumnowej 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);
        justify-items:center;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #gridbox > :nth-child(1) {
        justify-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) {
        justify-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) {
        justify-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 justify-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

  justify-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 "justify-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 szerokoś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 kolumnowej 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);
        justify-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) {
        justify-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 justify-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 kolumnowej miejsca, do którego został przypisany.

Przykład

  justify-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 kolumnowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "justify-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) {
        justify-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 justify-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 kolumnowej miejsca, do którego został przypisany.

Przykład

  justify-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 kolumnowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "justify-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) {
        justify-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 justify-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 kolumnowej miejsca, do którego został przypisany.

Przykład

  justify-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 kolumnowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "justify-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) {
        justify-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>

left

Wyjaśnienie

Za pomocą wartości left właściwości justify-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 kolumnowej miejsca, do którego został przypisany, która to krawędź kolumnowa znajduje się na lewo wzdłuż osi liniowej elementu HTML tworzącego dany układ siatki.

Przykład

  justify-self:left;
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 kolumnowej miejsca, do którego został przypisany, gdyż wspomniana początkowa krawędź kolumnowa znajduje się na lewo wzdłuż osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "justify-self" wraz z wartością "left".

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) {
        justify-self:left;
        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 justify-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 kolumnowej miejsca, do którego został przypisany, która to krawędź kolumnowa znajduje się bliżej początku tej osi interesującego nas elementu HTML, która to oś znajduje się na osi liniowej elementu HTML tworzącego dany układ siatki.

Przykład

  justify-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 kolumnowej miejsca, do którego został przypisany, gdyż wspomniana początkowa krawędź kolumnowa znajduje się bliżej początku znajdującej się na osi liniowej 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ść "justify-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) {
        justify-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 justify-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 kolumnowej miejsca, do którego został przypisany, która to krawędź kolumnowa znajduje się bliżej końca tej osi interesującego nas elementu HTML, która to oś znajduje się na osi liniowej elementu HTML tworzącego dany układ siatki.

Przykład

  justify-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 kolumnowej miejsca, do którego został przypisany, gdyż wspomniana początkowa krawędź kolumnowa znajduje się bliżej końca znajdującej się na osi liniowej 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ść "justify-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) {
        justify-self:self-end;
        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 justify-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ą kolumnową 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ą kolumnową 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

  justify-self:stretch;
div-1
div-2
div-3
div-4

Rozmiar szerokoś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 kolumnowej miejsca, do którego został przypisany, ponieważ do wspomnianego drugiego elementu dziecka przykładowego elementu "div#gridbox" została dodana właściwość "justify-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);
        justify-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) {
        justify-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>