Align-items хусусияти

align-items хусусияти flex-блоклар учун кўндаланг ўқ бўйича ва гридлар учун тик ўқ бўйича элементларни текислашни белгилайди. Ота-она элементга қўлланилади.

Синтаксис

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 қиймати + элемент ўлчамлари

Ҳозир элементлар учун эни ва бойи белгиланган, шунинг учун align-items хусусияти учун 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 {
  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;
}

Результат:

Мисол . Гридда тик ўқнинг бошига текислаш

Касалар ичидаги элементларимизни тик ўқнинг бошига текислаймиз:

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

Результат:

Энди браузернинг дев-тул кутида гридимизга назар соламиз:

Мисол . Гридда тик ўқнинг марказига текислаш

Энди элементларимизни касалар ичида тик ўқнинг марказига текислаймиз:

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

Результат:

Келинг гриднинг дев-тул кутидаги кўринишига назар соламиз:

Мисол . Гридда тик ўқнинг охирига текислаш

elementlarning tekislashini yana o'zgartiramiz, bu safar tik o'qning oxiriga tekislaymiz:

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

Результат:

Энди дев-тул кути орқали гридимизнинг кўринишига назар соламиз:

Шунингдек қаранг