Ostatnio edytowany:

align-items

Autor: Virtual Patriot

Opis właściwości align-items

Za pomocą właściwości align-items możemy określić sposób wyrównywania 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 poprzecznej elementu rodzica tworzącego układ elastyczny oraz w obszarze anonimowego bloku.

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

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości align-items

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

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

normal

Opis

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

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

Przykład

  align-items: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 "align-items" przykładowego elementu "div#flexbox" działa na takiej samej zasadzie jak wartość "stretch", a co za tym idzie rozmiar wysokości obszaru zawartości znajdujących się w anonimowym bloku elementów dzieci przykładowego elementu "div#flexbox" został rozciągnięty w obszarze anonimowego bloku wzdłuż osi poprzecznej 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;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #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

Opis

Za pomocą wartości flex-start właściwości align-items 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 poprzecznej, w kierunku początku tejże osi poprzecznej.

Przykład

  align-items: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 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-items" 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;
        align-items:flex-start;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #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

Opis

Za pomocą wartości flex-end właściwości align-items 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 poprzecznej, w kierunku końca tejże osi poprzecznej.

Przykład

  align-items: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 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-items" 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;
        align-items:flex-end;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #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

Opis

Za pomocą wartości center właściwości align-items 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 poprzecznej.

Przykład

  align-items: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 poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-items" 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;
        align-items:center;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #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>

stretch

Opis

Za pomocą wartości stretch właściwości align-items 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 stylu stretch. Styl stretch oznacza, że jeżeli wzdłuż osi poprzecznej w obszarze anonimowego bloku, w którym znajdują się dane elementy dzieci, pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni w obszarze anonimowego bloku zostanie dokonane rozciągnięcie znajdującego się na wspomnianej osi poprzecznej rozmiaru obszaru zawartości elementów dzieci.

Rozmiar szerokości obszaru zawartości elementu dziecka może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości width elementu dziecka jest wartość auto.

Rozmiar wysokości obszaru zawartości elementu dziecka może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości height elementu dziecka jest wartość auto.

Za pomocą właściwości max-width możemy określić wartość maksymalnego możliwego rozciągnięcia rozmiaru szerokości obszaru zawartości elementu dziecka.

Za pomocą właściwości max-height możemy określić wartość maksymalnego możliwego rozciągnięcia rozmiaru wysokości obszaru zawartości elementu dziecka.

Przykład

  align-items:stretch;
div - 1
div - 2
div - 3

Rozmiar wysokości obszaru zawartości znajdujących się w anonimowym bloku elementów dzieci przykładowego elementu "div#flexbox" został rozciągnięty w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-items" 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;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        align-items:stretch;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #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>