align-content հատկությունը

align-content հատկությունը սահմանում է էլեմենտների հավասարեցումը լայնակի առանցքի երկայնքով flex բլոկների համար և ուղղահայաց առանցքի նկատմամբ ցանցերի համար: Կիրառվում է ծնող էլեմենտի նկատմամբ:

Սինտաքսիս

cssսելեկտոր {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

Արժեքներ

Օրինակ . flex-start արժեք

Այս օրինակում առանցքը, որի երկայնքով տեղի է ունենում հավասարեցումը, ուղղված է վերևից ներքև, այսինքն այն լայնակի է: Ինչպես երևում է ստացված արդյունքից, մեր բոլոր էլեմենտները սեղմված են դրա վերին մասում:

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

css#parent {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Օրինակ . flex-end արժեք

Այս օրինակում բլոկները սեղմված են լայնակի առանցքի ստորին կողմում, քանի որ align-content հատկությունը սահմանված է արժեքով flex-end:

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

css#parent {
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
  height: 200px;
  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>

css#parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Ուղղահայաց առանցքի սկզբի նկատմամբ հավասարեցում ցանցում

Եկեք սահմանենք մեր էլեմենտների հավասարեցումը ցանցում ուղղահայաց առանցքի սկզբի նկատմամբ:

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

css#parent {
  display: grid;
  align-content: 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>

css#parent {
  display: grid;
  align-content: 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>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: 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;
}

Результат:

Տես նաև