Align-items hossasy

align-items hossasy, fleks bloklar üçin göçme oky boýunça, gridler üçin bolsa şekilli oky boýunça elementleriň deňleşdirilmegini kesgitleýär. Ene elemente degişlidir.

Sintaksis

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

Görnüşleri

Bellenen ähmiýeti: stretch.

Mysal . Stretch görnüşi

Häzirki wagtda esasy ok çepden saga tarap, göçme oky boýunça bolsa elementler ähli beýiklige çenli uzaldy:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

Mysal . Stretch görnüşi + elementleriň ölçegi

Häzirki wagtda elementler üçin ini we beýikligi kesgitlendi, şonuň üçin align-items hossasy üçin stretch görnüşi üns berilmez:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Mysal . Flex-start görnüşi, elementleriň ölçegi ýok

Häzirki wagtda elementler ýokaryk bölege ýerleşdiriler:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

Mysal . Flex-start görnüşi + elementleriň ölçegi

Häzirki wagtda elementler ýene-de ýokaryk bölege ýerleşdiriler, ýöne olaryň bellenen ini we beýikligi bolýar:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Mysal . Flex-end görnüşi + elementleriň ölçegi

Häzirki wagtda elementler aşak bölege ýerleşdiriler:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Mysal . Center görnüşi + elementleriň ölçegi

Häzirki wagtda elementler göçme oky boýunça merkeze (şu ýagdaýda şekilli oky boýunça) ýerleşdiriler:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Mysal . Center görnüşi, dürli ölçegli elementler

Häzirki wagtda elementleriň beýikligi dürlidir (häzir olar tekst bilen giňelýärler, ýöne height hem berlip bolýar), ini bolsa ählisinde deň, sebäbi width hossasy berlipdir:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  border: 1px solid #696989;
}

Результат:

Mysal . Baseline görnüşi, dürli ölçegli elementler

Bazis çyzygy boýunça deňleşdirme bolsa şeýle görünýär:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 130px;
  line-height: 1;
  border: 1px solid #696989;
}

Результат:

Mysal . Gridde şekilli okunyň başy boýunça deňleşdirme

Öz elementlerimizi öýjükleriň içinde şekilli okunyň başy boýunça deňleşdireliň:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Indi bolsa göz öňünde tutuş programmanyň çemesi açyjynda gridimizi göreliň:

Mysal . Gridde şekilli okunyň merkezi boýunça deňleşdirme

Indi bolsa öýjükleriň içindäki elementlerimizi şekilli okunyň merkezi boýunça deňleşdireliň:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: center;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Göz öňünde tutuş programmanyň çemesi açyjynda gridiň görkezilişine seredeliň:

Mysal . Gridde şekilli okunyň ahyry boýunça deňleşdirme

Bu gezek elementleriň deňleşdirilmesini üýtgedeliň, bu sany şekilli okunyň ahyry boýunça:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: end;
  grid-template-columns: 100px 100px;
  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 {
  
}

Результат:

Indi bolsa çemesi açyjyň üsti bilen gridimiziň nähili görnüşine seredeliň:

Hem görüň