Ostatnio edytowany:

align-self

Autor: Virtual Patriot

Opis właściwości align-self

Za pomocą właściwości align-self możemy określić sposób wyrównania znajdującego się w anonimowym bloku interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny. Wspomniane wyrównywanie elementu dziecka dokonuje się wzdłuż osi poprzecznej elementu rodzica tworzącego układ elastyczny oraz w obszarze anonimowego bloku.

Właściwość "align-self" ma pierwszeństwo przed właściwością align-items.

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

przeznaczenie
  • element dziecko elementu HTML typu flex
  • element dziecko elementu HTML typu inline-flex
pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości align-self

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

auto

Opis

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

Wartość auto właściwości align-self elementu HTML wskazuje na wartość, jaką posiada właściwość align-items elementu rodzica.

Przykład

  align-self:auto;
div - 1
div - 2
div - 3

Do przykładowego elementu "div#flexbox" została dodana właściwość "align-items" wraz z wartością "center", dzięki czemu wartością domyślną właściwości "align-self" drugiego elementu dziecka przykładowego elementu "div#flexbox" jest również wartość "center", a co za tym idzie znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyśrodkowany w obszarze anonimowego bloku względem początku oraz końca 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;
        align-items:center;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

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

  <body>

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

  </body>
</html>

normal

Opis

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

Przykład

  align-self:normal;
div - 1
div - 2
div - 3

Ze względu na to, iż przykładowy element "div#flexbox" jest typu "flex" wartość "normal" właściwości "align-self", która została dodana do drugiego dziecka 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ącego się w anonimowym bloku drugiego elementu dziecka 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;
        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) {
        align-self:normal;
        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-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyrównany w obszarze wspomnianego anonimowego bloku wzdłuż osi poprzecznej, w kierunku początku tejże osi poprzecznej.

Przykład

  align-self:flex-start;
div - 1
div - 2
div - 3

Znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany 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 drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" 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;
        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) {
        align-self:flex-start;
        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-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyrównany w obszarze wspomnianego anonimowego bloku wzdłuż osi poprzecznej, w kierunku końca tejże osi poprzecznej.

Przykład

  align-self:flex-end;
div - 1
div - 2
div - 3

Znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyrównany 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 drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" 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;
        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) {
        align-self:flex-end;
        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-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyśrodkowany w obszarze wspomnianego anonimowego bloku względem początku oraz końca osi poprzecznej.

Przykład

  align-self:center;
div - 1
div - 2
div - 3

Znajdujący się w anonimowym bloku drugi element dziecko przykładowego elementu "div#flexbox" został wyśrodkowany w obszarze anonimowego bloku względem początku oraz końca osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" 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;
        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) {
        align-self:center;
        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-self możemy sprawić, że znajdujący się w anonimowym bloku interesujący nas element dziecko elementu HTML tworzącego układ elastyczny zostanie wyrównany w stylu stretch. Styl stretch oznacza, że jeżeli wzdłuż osi poprzecznej w obszarze anonimowego bloku, w którym znajduje się dany element dziecko, 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 elementu dziecka.

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-self:stretch;
div - 1
div - 2
div - 3

Rozmiar wysokości obszaru zawartości znajdującego się w anonimowym bloku drugiego elementu dziecka 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 drugiego dziecka przykładowego elementu "div#flexbox" została dodana właściwość "align-self" 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;
        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) {
        align-self:stretch;
        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>