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-ը բրաուզերի դեբագերում:

Օրինակ . Դասավորում ուղղահայաց առանցքի կենտրոնում 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-ի ցուցադրումը դեբագերում:

Օրինակ . Դասավորում ուղղահայաց առանցքի վերջում 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-ը դեբագերի միջոցով:

Տես նաև