Својството align-items

Својството align-items го одредува усогласувањето на елементите по попречната оска за flex блокови и по вертикалната оска за grid мрежи. Се применува на родителскиот елемент.

Синтакса

cssселектор {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Вредности

Стандардна вредност: stretch.

Пример . Вредност stretch

Сега главната оска е насочена од лево кон десно, а по попречната оска елементите се растегнати на целата висина:

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;
}

Результат:

Пример . Вредност stretch + димензии на елементот

Сега на елементите им е зададена ширина и висина, па затоа вредноста stretch за својството align-items ќе биде игнорирана:

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;
}

Результат:

Пример . Вредност flex-start без димензии на елементот

Сега елементите ќе бидат притиснати кон врвот:

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;
}

Результат:

Пример . Вредност flex-start + димензии на елементот

Сега елементите се уште ќе бидат притиснати кон врвот, но на нив ќе им бидат зададени ширина и висина:

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;
}

Результат:

Пример . Вредност flex-end + димензии на елементот

Сега елементите ќе бидат притиснати кон дното:

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;
}

Результат:

Пример . Вредност center + димензии на елементот

Сега елементите ќе стојат во центарот по попречната оска (во овој случај вертикално):

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;
}

Результат:

Пример . Вредност center, елементи со различна големина

Сега елементите имаат различна големина по висина (сега се раширени од текстот, но може да се зададе и height), ширината кај сите е иста, бидејќи е зададено својството width:

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;
}

Результат:

Пример . Вредност baseline, елементи со различна големина

А еве како изгледа усогласувањето по базната линија:

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;
}

Результат:

Пример . Усогласување по почетокот на вертикалната оска во grid мрежа

Ајде да ги усогласиме нашите елементи во ќелиите по почетокот на вертикалната оска:

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;
}

Результат:

А сега да го погледнеме нашиот grid во debugger-от на прелистувачот:

Пример . Усогласување по центарот на вертикалната оска во grid мрежа

А сега да ги усогласиме нашите елементи во ќелиите по центарот на вертикалната оска:

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;
}

Результат:

Ајде да погледнеме како изгледа grid мрежата во debugger-от:

Пример . Усогласување по крајот на вертикалната оска во grid мрежа

Повторно да го смениме усогласувањето на елементите, овој пат по крајот на вертикалната оска:

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 {
  
}

Результат:

А сега да погледнеме како изгледа нашата grid мрежа преку debugger-от:

Погледнете исто така