Ostatnio edytowany:

align-content

Autor: Virtual Patriot

Opis właściwości align-content

Za pomocą właściwości align-content możemy określić jeden ze sposobów wyrównania kilku grup elementów dzieci interesującego nas elementu HTML. Mowa tu o elementach dzieciach elementu HTML tworzącego układ elastyczny.

Jeżeli elementy dzieci nie znajdują się w kilku wierszach lub w kilku kolumnach, wtedy właściwość "align-content" nie daje żadnego widocznego efektu dla danych elementów dzieci.

Dodatkowe techniczne informacje o właściwości align-content

przeznaczenie
dziedziczenie

nie

wartość initial

stretch

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości align-content

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie (interpretuje od wersji 11, lecz z wieloma możliwymi błędami)

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

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

stretch

Opis

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

Domyślnie grupy elementów dzieci elementu HTML wyrównywane są naraz w kierunku dwóch krawędzi obszaru zawartości swojego elementu rodzica (mowa tu o tych krawędziach, na które wskazuje wartość flex-start oraz wartość flex-end). Wspomniane wyrównanie powoduje rozciągnięcie jednego z rozmiarów obszaru zawartości wspomnianych elementów dzieci.

Jeżeli któryś z elementów dzieci posiada stały rozmiar obszaru zawartości (mowa tu o tym rozmiarze, który jest rozciągany przez wartość "stretch"), wtedy wartość "stretch" działa na ten element dziecko na takiej samej zasadzie jak wartość flex-start.

Przykład

  align-content:stretch;
div - 1
div - 2
div - 3
div - 4
div - 5
div - 6
div - 7
div - 8
div - 9

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane naraz w kierunku górnej oraz dolnej krawędzi obszaru zawartości przykładowego elementu "div#flexbox".

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;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        height:350px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        flex-basis:25%;
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }
    </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>

flex-start

Opis

Za pomocą wartości flex-start właściwości align-content możemy sprawić, że grupy elementów dzieci interesującego nas elementu HTML zostaną wyrównane w kierunku tej krawędzi obszaru zawartości swojego elementu rodzica, do której razem przylegają.

Przykład

  align-content:flex-start;
div - 1
div - 2
div - 3
div - 4
div - 5
div - 6
div - 7
div - 8
div - 9

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w kierunku górnej krawędzi obszaru zawartości 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".

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;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-content:flex-start;
        height:350px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        flex-basis:25%;
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }
    </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>

flex-end

Opis

Za pomocą wartości flex-end właściwości align-content możemy sprawić, że grupy elementów dzieci interesującego nas elementu HTML zostaną wyrównane w kierunku tej krawędzi obszaru zawartości swojego elementu rodzica, która jest krawędzią przeciwną do krawędzi, na którą wskazuje wartość flex-start.

Przykład

  align-content:flex-end;
div - 1
div - 2
div - 3
div - 4
div - 5
div - 6
div - 7
div - 8
div - 9

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w kierunku dolnej krawędzi obszaru zawartości 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".

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;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-content:flex-end;
        height:350px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        flex-basis:25%;
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }
    </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>

center

Opis

Za pomocą wartości center właściwości align-content możemy sprawić, że grupy elementów dzieci interesującego nas elementu HTML zostaną wyśrodkowane względem dwóch krawędzi obszaru zawartości swojego elementu rodzica (mowa tu o tych krawędziach, na które wskazuje wartość flex-start oraz wartość flex-end).

Przykład

  align-content:center;
div - 1
div - 2
div - 3
div - 4
div - 5
div - 6
div - 7
div - 8
div - 9

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyśrodkowane względem górnej oraz dolnej krawędzi obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" 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;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-content:center;
        height:350px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        flex-basis:25%;
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }
    </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>

space-between

Opis

Za pomocą wartości space-between właściwości align-content możemy sprawić, że grupy elementów dzieci interesującego nas elementu HTML zostaną rozłożone pomiędzy dwiema krawędziami obszaru zawartości swojego elementu rodzica (mowa tu o tych krawędziach, na które wskazuje wartość flex-start oraz wartość flex-end). Wspomniane rozłożenie polega na tym, że pomiędzy wszystkimi grupami elementów dzieci zostanie dodana dodatkowa przestrzeń o jednakowym rozmiarze (rozmiar ten uzależniony jest od rozmiaru wolnej przestrzeni, jaka pozostała pomiędzy krawędziami, z których korzysta wartość space-between).

Przykład

  align-content:space-between;
div - 1
div - 2
div - 3
div - 4
div - 5
div - 6
div - 7
div - 8
div - 9

Elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone pomiędzy górną oraz dolną krawędzią obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" 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;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-content:space-between;
        height:350px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        flex-basis:25%;
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }
    </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>

space-around

Opis

Za pomocą wartości space-around właściwości align-content możemy sprawić, że grupy elementów dzieci interesującego nas elementu HTML zostaną rozłożone pomiędzy dwiema krawędziami obszaru zawartości swojego elementu rodzica (mowa tu o tych krawędziach, na które wskazuje wartość flex-start oraz wartość flex-end). Wspomniane rozłożenie polega na tym, że pomiędzy wszystkimi grupami elementów dzieci zostanie dodana dodatkowa przestrzeń o jednakowym rozmiarze (rozmiar ten uzależniony jest od rozmiaru wolnej przestrzeni, jaka pozostała pomiędzy krawędziami, z których korzysta wartość space-around). Ponadto przy wspomnianych krawędziach pojawi się dodatkowa przestrzeń o rozmiarze wynoszącym połowę rozmiaru przestrzeni, jaka została dodana pomiędzy wspomnianymi grupami elementów dzieci.

Przykład

  align-content:space-around;
div - 1
div - 2
div - 3
div - 4
div - 5
div - 6
div - 7
div - 8
div - 9

Elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone pomiędzy górną oraz dolną krawędzią obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" 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;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-content:space-around;
        height:350px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        flex-basis:25%;
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }
    </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>