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

Результат:

මේවාත් බලන්න