Autor publikacji
Virtual Patriot - Administrator

justify-content

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości justify-content

Za pomocą właściwości justify-content możemy określić sposób wyrównania znajdujących się w anonimowych blokach elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny. Wspomniane wyrównywanie elementów dzieci dokonuje się wzdłuż osi głównej elementu rodzica tworzącego układ elastyczny oraz w obszarze anonimowego bloku.

Informacje dodatkowe

gdy któryś z elementów dzieci znajdujący się w obszarze danego anonimowego bloku w jakikolwiek sposób został wyrównany za pomocą wartości auto właściwości margin wzdłuż osi głównej elementu rodzica tworzącego układ elastyczny, wtedy właściwość justify-content nie daje żadnego widocznego efektu dla elementów dzieci znajdujących się w obszarze danego anonimowego bloku

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

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości justify-content

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości left oraz right.

Safari

tak

Nie interpretuje wartości left oraz right.

Opera

tak

Nie interpretuje wartości left oraz right.

Internet Explorer

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

Edge

tak

Nie interpretuje wartości left oraz right.

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

normal

Wyjaśnienie

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

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

Przykład

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

Ze względu na to, iż przykładowy element "div#flexbox" jest typu "flex" wartość domyślna właściwości "justify-content" przykładowego elementu "div#flexbox" działa na takiej samej zasadzie jak wartość "flex-start", a co za tym idzie znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w obszarze anonimowego bloku wzdłuż osi głównej przykładowego elementu "div#flexbox", w kierunku początku osi głównej 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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

flex-start

Wyjaśnienie

Za pomocą wartości flex-start właściwości justify-content możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku wzdłuż osi głównej, w kierunku początku tejże osi głównej.

Przykład

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

Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w obszarze anonimowego bloku wzdłuż osi głównej przykładowego elementu "div#flexbox", w kierunku początku osi głównej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "justify-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;
        justify-content:flex-start;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

flex-end

Wyjaśnienie

Za pomocą wartości flex-end właściwości justify-content możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku wzdłuż osi głównej, w kierunku końca tejże osi głównej.

Przykład

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

Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w obszarze anonimowego bloku wzdłuż osi głównej przykładowego elementu "div#flexbox", w kierunku końca osi głównej 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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

center

Wyjaśnienie

Za pomocą wartości center właściwości justify-content możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyśrodkowane w obszarze wspomnianego anonimowego bloku względem początku oraz końca osi głównej.

Przykład

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

Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyśrodkowane w obszarze anonimowego bloku względem początku oraz końca osi głównej 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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

left

Wyjaśnienie

Za pomocą wartości left właściwości justify-content możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku na lewo wzdłuż osi głównej.

Przykład

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

Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w obszarze anonimowego bloku na lewo wzdłuż osi głównej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "justify-content" wraz z wartością "left".

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:left;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

space-between

Wyjaśnienie

Za pomocą wartości space-between właściwości justify-content możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku w stylu space-between. Styl space-between oznacza, że jeżeli wzdłuż osi głównej w obszarze anonimowego bloku, do którego należą dane elementy dzieci, pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi elementami dziećmi należącymi do danego anonimowego bloku.

Gdy anonimowy blok posiada tylko jeden element dziecko elementu HTML tworzącego układ elastyczny, 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

Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone w obszarze anonimowego bloku wzdłuż osi głównej przykładowego elementu "div#flexbox", pomiędzy początkiem oraz końcem osi głównej przykładowego elementu "div#flexbox", w stylu "space-between", 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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

space-around

Wyjaśnienie

Za pomocą wartości space-around właściwości justify-content możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku w stylu space-around. Styl space-around oznacza, że jeżeli wzdłuż osi głównej w obszarze anonimowego bloku, do którego należą dane elementy dzieci, pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi elementami dziećmi należącymi do danego anonimowego bloku, dodatkowo rozmiar połowy jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszym oraz po ostatnim elemencie dziecku należącym do danego anonimowego bloku.

Gdy anonimowy blok posiada tylko jeden element dziecko elementu HTML tworzącego układ elastyczny, 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

Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone w obszarze anonimowego bloku wzdłuż osi głównej przykładowego elementu "div#flexbox", pomiędzy początkiem oraz końcem osi głównej przykładowego elementu "div#flexbox", w stylu "space-around", 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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>

space-evenly

Wyjaśnienie

Za pomocą wartości space-evenly właściwości justify-content możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku w stylu space-evenly. Styl space-evenly oznacza, że jeżeli wzdłuż osi głównej w obszarze anonimowego bloku, do którego należą dane elementy dzieci, pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi elementami dziećmi należącymi do danego anonimowego bloku, dodatkowo rozmiar jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszym oraz po ostatnim elemencie dziecku należącym do danego anonimowego bloku.

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

Przykład

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

Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone w obszarze anonimowego bloku wzdłuż osi głównej przykładowego elementu "div#flexbox", pomiędzy początkiem oraz końcem osi głównej przykładowego elementu "div#flexbox", w stylu "space-evenly", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "justify-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;
      }

      #flexbox {
        display:flex;
        justify-content:space-evenly;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>