Ostatnio edytowany:

justify-content

Autor: Virtual Patriot

Opis właściwości justify-content

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

Jeżeli któryś z elementów dzieci posiada właściwość margin wraz z wartością auto, która sprawia, że dany element dziecko musi zmienić swoje położenie względem krawędzi, z których korzysta właściwość "justify-content", wtedy właściwość "justify-content" nie daje żadnego widocznego efektu dla elementów dzieci znajdujących się w tym samym wierszu lub znajdujących się w tej samej kolumnie co wspomniany element dziecko posiadający właściwość margin wraz z wartością auto.

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

przeznaczenie
dziedziczenie

nie

wartość initial

flex-start

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości justify-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 justify-content

flex-start

Opis

Wartość flex-start jest domyślną wartością właściwości justify-content.

Domyślnie elementy dzieci elementu HTML wyrównywane są w kierunku tej krawędzi obszaru zawartości swojego elementu rodzica, od której rozpoczęło się układanie wspomnianych elementów dzieci.

Przykład

  justify-content:flex-start;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w kierunku lewej 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;
        align-items:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        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>

  </body>
</html>

flex-end

Opis

Za pomocą wartości flex-end właściwości justify-content możemy sprawić, że elementy 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

  justify-content:flex-end;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w kierunku prawej krawędzi obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "justify-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;
        justify-content:flex-end;
        align-items:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        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>

  </body>
</html>

center

Opis

Za pomocą wartości center właściwości justify-content możemy sprawić, że elementy 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

  justify-content:center;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyśrodkowane względem lewej oraz prawej krawędzi obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "justify-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;
        justify-content:center;
        align-items:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        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>

  </body>
</html>

space-between

Opis

Za pomocą wartości space-between właściwości justify-content możemy sprawić, że elementy 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 elementami dziećmi 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).

Jeżeli w danym wierszu lub w danej kolumnie znajduje się tylko jeden element dziecko, wtedy wartość "space-between" działa na ten element dziecko na takiej samej zasadzie jak wartość flex-start.

Przykład

  justify-content:space-between;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone pomiędzy lewą oraz prawą krawędzią obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "justify-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;
        justify-content:space-between;
        align-items:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        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>

  </body>
</html>

space-around

Opis

Za pomocą wartości space-around właściwości justify-content możemy sprawić, że elementy 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 elementami dziećmi 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 elementami dziećmi.

Jeżeli w danym wierszu lub w danej kolumnie znajduje się tylko jeden element dziecko, wtedy wartość "space-around" działa na ten element dziecko na takiej samej zasadzie jak wartość center.

Przykład

  justify-content:space-around;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone pomiędzy lewą oraz prawą krawędzią obszaru zawartości przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "justify-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;
        justify-content:space-around;
        align-items:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        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>

  </body>
</html>