align-content

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

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

  align-content:normal;

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

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>

Za pomocą wartości flex-start właściwości align-content możemy sprawić, że anonimowe bloki interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane wzdłuż osi poprzecznej, w kierunku początku tejże osi poprzecznej.

  align-content:flex-start;

Anonimowe bloki przykładowego elementu "div#flexbox" zostały wyrównane wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", w kierunku początku osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-content" wraz z wartością "flex-start".

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-content:flex-start;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>

Za pomocą wartości flex-end właściwości align-content możemy sprawić, że anonimowe bloki interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane wzdłuż osi poprzecznej, w kierunku końca tejże osi poprzecznej.

  align-content:flex-end;

Anonimowe bloki przykładowego elementu "div#flexbox" zostały wyrównane wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", w kierunku końca osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-content" wraz z wartością "flex-end".

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-content:flex-end;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>

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

  align-content:center;

Anonimowe bloki przykładowego elementu "div#flexbox" zostały wyśrodkowane względem początku oraz końca osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-content" wraz z wartością "center".

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-content:center;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>

Za pomocą wartości space-between właściwości align-content możemy sprawić, że anonimowe bloki interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w stylu space-between. Styl space-between oznacza, że jeżeli wzdłuż osi poprzecznej, do której należą dane anonimowe bloki, pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi anonimowymi blokami.

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

  align-content:space-between;

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

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-content:space-between;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>

Za pomocą wartości space-around właściwości align-content możemy sprawić, że anonimowe bloki interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w stylu space-around. Styl space-around oznacza, że jeżeli wzdłuż osi poprzecznej, do której należą dane anonimowe bloki, pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi anonimowymi blokami, dodatkowo rozmiar połowy jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszym anonimowym blokiem oraz po ostatnim anonimowym bloku.

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

  align-content:space-around;

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

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-content:space-around;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>

Za pomocą wartości space-evenly właściwości align-content możemy sprawić, że anonimowe bloki interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w stylu space-evenly. Styl space-evenly oznacza, że jeżeli wzdłuż osi poprzecznej, do której należą dane anonimowe bloki, pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi anonimowymi blokami, dodatkowo rozmiar jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszym anonimowym blokiem oraz po ostatnim anonimowym bloku.

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

  align-content:space-evenly;

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

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-content:space-evenly;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>

Za pomocą wartości stretch właściwości align-content możemy sprawić, że anonimowe bloki interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w stylu stretch. Styl stretch oznacza, że jeżeli wzdłuż osi poprzecznej, do której należą dane anonimowe bloki, pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni zostanie dokonane równomierne rozciągnięcie znajdującego się na wspomnianej osi poprzecznej rozmiaru anonimowych bloków.

  align-content:stretch;

Rozmiar wysokości anonimowych bloków przykładowego elementu "div#flexbox" został równomiernie rozciągnięty wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-content" wraz z wartością "stretch".

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-content:stretch;
        height:400px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>