⌘K

Vlastnosť align-self

Vlastnosť align-self nastavuje zarovnanie pozdĺž priečnej osi pre jednotlivý flex-blok a pozdĺž vertikálnej osi pre jednotlivý prvok v gride. V podstate táto vlastnosť predstavuje vlastnosť align-items, ale pre konkrétny blok.

Syntax

cssselektor {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Hodnoty

Hodnota Popis
flex-start Blok je pritlačený k začiatku priečnej osi.
flex-end Blok je pritlačený ku koncu priečnej osi.
center Blok je umiestnený v strede priečnej osi.
baseline Blok je zarovnaný podľa svojej základnej línie. Základná línia je imaginárna línia, prechádzajúca pozdĺž spodného okraja znakov bez zohľadnenia previsov, napríklad ako u písmen 'p', 'q', 'y', 'g'.
stretch Blok je roztiahnutý, zaberá všetok dostupný priestor pozdĺž priečnej osi, pričom sa však berú do úvahy min-width a max-width, ak sú nastavené. Ak je nastavená šírka a výška pre prvok - stretch bude ignorovaný.
auto Blok bude zarovnaný tak, ako je nastavené vo vlastnosti align-items.

Predvolená hodnota: auto.

Príklad . Hodnota stretch

V tomto príklade je všetkým blokom nastavená hodnota flex-start (vlastnosť align-items), a tretiemu bloku - align-self s hodnotou stretch: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div id="elem">3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
  height: 100px;
}
#parent > div {
  min-width: 100px;
  border: 1px solid #696989;
}
#elem {
  align-self: stretch;
}

Результат:

Príklad . Hodnota flex-end

V tomto príklade je všetkým blokom pre vlastnosť align-items nastavená hodnota flex-start, a tretiemu bloku - align-self s hodnotou flex-end: 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div id="elem">3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
  height: 100px;
}
#parent > div {
  min-width: 100px;
  border: 1px solid #696989;
}
#elem {
  align-self: flex-end;
}

Результат:

Príklad . Zarovnanie na začiatok vertikálnej osi v gride

Nastavme zarovnanie pre prvý prvok na začiatok vertikálnej osi: 

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>
css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: start;
}

Результат:

Príklad . Zarovnanie na stred vertikálnej osi v gride

Nastavme zarovnanie prvého prvku na stred vertikálnej osi: 

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: center;
}

Результат:

Príklad . Zarovnanie na koniec vertikálnej osi v gride

Nastavme zarovnanie pre náš prvý prvok v gride na koniec vertikálnej osi: 

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: end;
}

Результат:

Pozri tiež

  • vlastnosť flex-direction,
    ktorá nastavuje smer osí flex blokov
  • vlastnosť justify-content,
    ktorá nastavuje zarovnanie pozdĺž hlavnej osi
  • vlastnosť align-items,
    ktorá nastavuje zarovnanie pozdĺž priečnej osi
  • vlastnosť flex-wrap,
    ktorá nastavuje viacriadkovosť flex blokov
  • vlastnosť flex-flow,
    skratka pre flex-direction a flex-wrap
  • vlastnosť order,
    ktorá nastavuje poradie flex blokov
  • vlastnosť flex-basis,
    ktorá nastavuje veľkosť konkrétneho flex bloku
  • vlastnosť flex-grow,
    ktorá nastavuje "hladovosť" flex blokov
  • vlastnosť flex-shrink,
    ktorá nastavuje stlačiteľnosť flex blokov
  • vlastnosť flex,
    skratka pre flex-grow, flex-shrink a flex-basis
BackVlastnosť flex-flowNextVlastnosť order