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ć 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ść "align-items", wtedy właściwość "align-items" nie daje żadnego widocznego efektu dla danego elementu dziecka.

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

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • tak

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

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

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

stretch

Opis

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

Domyślnie elementy 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

div - 1
div - 2
div - 3

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;
        justify-content:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        font-size:1.2em;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </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 elementy 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

div - 1
div - 2
div - 3

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-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;
        justify-content:center;
        align-items:flex-start;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        font-size:1.2em;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </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 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

div - 1
div - 2
div - 3

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-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;
        justify-content:center;
        align-items:flex-end;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        font-size:1.2em;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </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 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

div - 1
div - 2
div - 3

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-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;
        justify-content:center;
        align-items:center;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        font-size:1.2em;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

baseline

Opis

Za pomocą wartości baseline właściwości align-items możemy sprawić, że elementy dzieci interesującego nas elementu HTML zostaną wyrównane do linii bazowej wiersza, do którego należą.

Jeżeli elementy dzieci występują w kolumnie, wtedy wartość "baseline" działa na te elementy dzieci na takiej samej zasadzie jak wartość flex-start.

Przykład

div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane do linii bazowej pierwszego wiersza przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-items" wraz z wartością "baseline".

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:baseline;
        height:200px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        font-size:1em;
      }

      #flexbox > :nth-child(2) {
        font-size:1.2em;
      }

      #flexbox > :nth-child(3) {
        font-size:1.4em;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>