align-items касиети

align-items касиети флекс блоктору үчүн элементтерди көндөй ок боюнча, гриддер үчүн тик ок боюнча ровдойт. Ата-эне элементине колдонулат.

Синтаксис

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

Результат:

Келгиле, гриддин дебаггердеги көрүнүшүн көрөлү:

Мисал . Гридде тик октун аягы боюнча ровдоо

Дагы элементтердин ровдолушун өзгөртөлү, бул жолу тик октун аягы боюнча:

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

Результат:

Эми келгиле, биздин грид дебаггер аркылуу кандай көрүнгөнүн көрөлү:

Ошондой эле караңыз