Ostatnio edytowany:

place-self

Autor: Virtual Patriot

Opis właściwości place-self

Za pomocą właściwości place-self możemy określić kilka różnych cech dotyczących wyrównywania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki.

Informacje dodatkowe

brak

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

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

static, relative

Właściwość "place-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 "place-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 place-self

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

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

grupa wartości

Opis

Za pomocą właściwości place-self oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech dotyczących wyrównywania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  place-self:center end;
}

/* REGUŁA - 2 */
div {
  align-self:center;
  justify-self:end;
}

Składniki grupy wartości właściwości place-self

Ważne

podana przez nas grupa wartości właściwości place-self nie może zawierać wartości globalnych

Przykładowe zapisy

center

normal end

start normal

center self-end

align

Składnik align nie jest wymaganym składnikiem grupy wartości właściwości place-self. Składnik align określa wartość właściwości align-self, czyli sposób wyrównania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany.

Wartość domyślna

normal

justify

Składnik justify nie jest wymaganym składnikiem grupy wartości właściwości place-self. Składnik justify określa wartość właściwości justify-self, czyli sposób wyrównania interesującego nas elementu HTML należącego do siatki elementu HTML tworzącego układ siatki względem początkowej oraz końcowej krawędzi kolumnowej miejsca, do którego został przypisany.

Wartość domyślna

wartość składnika align

Przykład

  place-self:center end;
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, ponadto 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ść "place-self" wraz z następującą grupą wartości: "center 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:#CBFFFF;
      }

      #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) {
        place-self:center 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>