Autor publikacji
Virtual Patriot - Administrator

align-content

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości align-content

Za pomocą właściwości align-content możemy określić sposób wyrównania wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki. Wspomniane wyrównywanie wierszy budujących siatkę dokonuje się wzdłuż osi blokowej elementu HTML tworzącego układ siatki oraz w obszarze zawartości elementu HTML tworzącego układ siatki.

Informacje dodatkowe

brak

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

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości align-content

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

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

normal

Wyjaśnienie

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

Wartość normal właściwości align-content elementu HTML typu grid lub inline-grid działa na takiej samej zasadzie jak wartość stretch.

Przykład

  align-content:normal;

Ze względu na to, iż przykładowy element "div#gridbox" jest typu "grid" wartość domyślna właściwości "align-content" przykładowego elementu "div#gridbox" działa na takiej samej zasadzie jak wartość "stretch", a co za tym idzie rozmiar wysokości wierszy budujących siatkę przykładowego elementu "div#gridbox" został równomiernie rozciągnięty wzdłuż osi blokowej przykładowego elementu "div#gridbox".

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-columns:repeat(4, 65px);
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

start

Wyjaśnienie

Za pomocą wartości start właściwości align-content możemy sprawić, że wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane wzdłuż osi blokowej, w kierunku początku tejże osi blokowej.

Przykład

  align-content:start;

Wiersze budujące siatkę przykładowego elementu "div#gridbox" zostały wyrównane wzdłuż osi blokowej przykładowego elementu "div#gridbox", w kierunku początku osi blokowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" 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, 65px);
        grid-template-columns:repeat(4, 65px);
        align-content:start;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

end

Wyjaśnienie

Za pomocą wartości end właściwości align-content możemy sprawić, że wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane wzdłuż osi blokowej, w kierunku końca tejże osi blokowej.

Przykład

  align-content:end;

Wiersze budujące siatkę przykładowego elementu "div#gridbox" zostały wyrównane wzdłuż osi blokowej przykładowego elementu "div#gridbox", w kierunku końca osi blokowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" 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, 65px);
        grid-template-columns:repeat(4, 65px);
        align-content:end;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

center

Wyjaśnienie

Za pomocą wartości center właściwości align-content możemy sprawić, że wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyśrodkowane względem początku oraz końca osi blokowej.

Przykład

  align-content:center;

Wiersze budujące siatkę przykładowego elementu "div#gridbox" zostały wyśrodkowane względem początku oraz końca osi blokowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" 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, 65px);
        grid-template-columns:repeat(4, 65px);
        align-content:center;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

space-between

Wyjaśnienie

Za pomocą wartości space-between właściwości align-content możemy sprawić, że wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu space-between. Styl space-between oznacza, że jeżeli wzdłuż osi blokowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi wierszami.

Gdy element HTML tworzący układ siatki posiada tylko jeden wiersz, wtedy wartość "space-between" działa na takiej samej zasadzie jak wartość start.

Przykład

  align-content:space-between;

Wiersze budujące siatkę przykładowego elementu "div#gridbox" zostały rozłożone wzdłuż osi blokowej przykładowego elementu "div#gridbox", pomiędzy początkiem oraz końcem osi blokowej przykładowego elementu "div#gridbox", w stylu "space-between", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" wraz z wartością "space-between".

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, 65px);
        grid-template-columns:repeat(4, 65px);
        align-content:space-between;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

space-around

Wyjaśnienie

Za pomocą wartości space-around właściwości align-content możemy sprawić, że wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu space-around. Styl space-around oznacza, że jeżeli wzdłuż osi blokowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi wierszami, dodatkowo rozmiar połowy jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszym wierszem oraz po ostatnim wierszu.

Gdy element HTML tworzący układ siatki posiada tylko jeden wiersz, wtedy wartość "space-around" działa na takiej samej zasadzie jak wartość center.

Przykład

  align-content:space-around;

Wiersze budujące siatkę przykładowego elementu "div#gridbox" zostały rozłożone wzdłuż osi blokowej przykładowego elementu "div#gridbox", pomiędzy początkiem oraz końcem osi blokowej przykładowego elementu "div#gridbox", w stylu "space-around", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" wraz z wartością "space-around".

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, 65px);
        grid-template-columns:repeat(4, 65px);
        align-content:space-around;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

space-evenly

Wyjaśnienie

Za pomocą wartości space-evenly właściwości align-content możemy sprawić, że wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu space-evenly. Styl space-evenly oznacza, że jeżeli wzdłuż osi blokowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi wierszami, dodatkowo rozmiar jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszym wierszem oraz po ostatnim wierszu.

Gdy element HTML tworzący układ siatki posiada tylko jeden wiersz, wtedy wartość "space-evenly" działa na takiej samej zasadzie jak wartość center.

Przykład

  align-content:space-evenly;

Wiersze budujące siatkę przykładowego elementu "div#gridbox" zostały rozłożone wzdłuż osi blokowej przykładowego elementu "div#gridbox", pomiędzy początkiem oraz końcem osi blokowej przykładowego elementu "div#gridbox", w stylu "space-evenly", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" wraz z wartością "space-evenly".

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, 65px);
        grid-template-columns:repeat(4, 65px);
        align-content:space-evenly;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

stretch

Wyjaśnienie

Za pomocą wartości stretch właściwości align-content możemy sprawić, że wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu stretch. Styl stretch oznacza, że jeżeli wzdłuż osi blokowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni zostanie dokonane równomierne rozciągnięcie znajdującego się na wspomnianej osi blokowej rozmiaru wierszy.

Tylko wiersze posiadające automatyczny rozmiar mogą zostać rozciągnięte. Dla wierszy nieposiadających automatycznego rozmiaru wartość "stretch" działa na takiej samej zasadzie jak wartość start.

Przykład

  align-content:stretch;

Rozmiar wysokości wierszy budujących siatkę przykładowego elementu "div#gridbox" został równomiernie rozciągnięty wzdłuż osi blokowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" 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-columns:repeat(4, 65px);
        align-content:stretch;
        height:450px;
        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:2;
        grid-row-end:4;
        grid-column-start:2;
        grid-column-end:4;
        background-color:orange;
      }

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

  <body>

    <div id="gridbox">
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>