Autor publikacji
Virtual Patriot - Administrator

align-items

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości align-items

Za pomocą właściwości align-items możemy określić sposób wyrównania elementów HTML należących do siatki interesującego nas elementu HTML tworzącego układ siatki. Wspomniane wyrównywanie elementów HTML należących 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

gdy któryś z elementów HTML należących 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-items nie daje żadnego widocznego efektu dla danego elementu HTML

Informacje techniczne o właściwości align-items

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości align-items

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

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

normal

Wyjaśnienie

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

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

Przykład

  align-items:normal;
div-1
div-2
div-3
div-4

Ze względu na to, iż przykładowy element "div#gridbox" jest typu "grid" wartość domyślna właściwości "align-items" 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 elementów dzieci 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 każdy z poszczególnych elementów dzieci.

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) {
        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-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku początkowej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML.

Przykład

  align-items:start;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku początkowej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-items" 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);
        align-items:start;
        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) {
        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-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku końcowej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML.

Przykład

  align-items:end;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku końcowej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-items" 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);
        align-items:end;
        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) {
        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-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyśrodkowane względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML.

Przykład

  align-items:center;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyśrodkowane względem początkowej oraz końcowej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-items" 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);
        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) {
        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-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku tej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML, która to krawędź wierszowa znajduje się bliżej początku tej osi poszczególnego elementu HTML, która to oś znajduje się na osi blokowej elementu HTML tworzącego dany układ siatki.

Przykład

  align-items:self-start;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku tej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to krawędź wierszowa znajduje się bliżej początku tej osi każdego z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to oś znajduje się na osi blokowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-items" 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);
        align-items:self-start;
        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) {
        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) {
        direction:rtl;
        writing-mode:vertical-rl;
        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-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane w kierunku tej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów HTML, która to krawędź wierszowa znajduje się bliżej końca tej osi poszczególnego elementu HTML, która to oś znajduje się na osi blokowej elementu HTML tworzącego dany układ siatki.

Przykład

  align-items:self-end;
div-1
div-2
div-3
div-4

Elementy dzieci przykładowego elementu "div#gridbox" zostały wyrównane w kierunku tej krawędzi wierszowej miejsca, do którego został przypisany każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to krawędź wierszowa znajduje się bliżej końca tej osi każdego z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", która to oś znajduje się na osi blokowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-items" 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);
        align-items:self-end;
        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) {
        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) {
        direction:rtl;
        writing-mode:vertical-rl;
        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-items możemy sprawić, że należące do siatki interesującego nas elementu HTML tworzącego układ siatki elementy HTML zostaną wyrównane 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-items:stretch;
div-1
div-2
div-3
div-4

Rozmiar wysokości obszaru zawartości elementów dzieci 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 każdy z poszczególnych elementów dzieci przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-items" 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:stretch;
        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) {
        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>