align-content ဂုဏ်သတ္တိ

align-content ဂုဏ်သတ္တိသည် flex ဘလောက်များအတွက် ဘေးတိုက်ဝင်ရိုးတလျှောက်လည်းကောင်း၊ grid များအတွက် ဒေါင်လိုက်ဝင်ရိုးတလျှောက်လည်းကောင်း အစုအဝေးများ၏ ချိန်ညှိမှုကို သတ်မှတ်ပေးသည်။ မိဘ element သို့ သက်ရောက်သည်။

Syntax

cssselector {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

တန်ဖိုးများ

ဥပမာ . flex-start တန်ဖိုး

ဤဥပမာတွင် ချိန်ညှိခြင်းလုပ်ဆောင်သည့် ဝင်ရိုး၏ ဦးတည်ချက်သည် အပေါ်မှ အောက်သို့ ဖြစ်သောကြောင့်၊ ၎င်းသည် ဘေးတိုက်ဝင်ရိုးဖြစ်သည်။ ရရှိလာသော ရလဒ်မှ မြင်တွေ့ရသကဲ့သို့၊ ကျွန်ုပ်တို့၏ element အားလုံးသည် ၎င်း၏ အပေါ်ပိုင်းနေရာသို့ ကပ်နေသည်:

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

Результат:

Grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏အစဖက်သို့ ချိန်ညှိခြင်း

ကျွန်ုပ်တို့၏ grid အတွင်းရှိ element များအား ဒေါင်လိုက်ဝင်ရိုး၏ အစဖက်သို့ ချိန်ညှိမှုကို သတ်မှတ်ကြပါစို့:

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

Результат:

Grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏အလယ်ဗဟိုသို့ ချိန်ညှိခြင်း

ယခုအခါ element များအား ဒေါင်လိုက်ဝင်ရိုး၏ အလယ်ဗဟိုသို့ ချိန်ညှိမှုကို သတ်မှတ်ကြပါစို့:

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

Результат:

Grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏အဆုံးဖက်သို့ ချိန်ညှိခြင်း

ယခုအခါ element များအား ဒေါင်လိုက်ဝင်ရိုး၏ အဆုံးဖက်သို့ ချိန်ညှိမှုကို သတ်မှတ်ကြပါစို့:

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

Результат:

ဆက်လက်လေ့လာရန်