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

place-content ဂုဏ်သတ္တိသည် flex ဒြပ်စင်များအတွက် အဓိကနှင့် ဖြတ်ဝင်ရိုးများတလျှောက်၊ grid များအတွက် ရေပြင်ညီနှင့် ဒေါင်လိုက် ဝင်ရိုးများတလျှောက် ဒြပ်စင်များကို ညှိပေးသည်။ ပထမတန်ဖိုးသည် အဓိက (ရေပြင်ညီ) ဝင်ရိုးတလျှောက် ညှိခြင်းကို ဖော်ပြပြီး၊ ဒုတိယတန်ဖိုးသည် ဖြတ်ဝင်ရိုး (ဒေါင်လိုက်) ညှိခြင်းကို ဖော်ပြသည်။ ဂုဏ်သတ္တိကို မိဘဒြပ်စင်ထံ သုံးစွဲသည်။

ဝါကျဖွဲ့စည်းပုံ

cssselector {
  place-content: main_axis cross_axis;
}

ဥပမာ . အဓိကဝင်ရိုး၏အစနှင့် ဖြတ်ဝင်ရိုး၏ဗဟိုသို့ ညှိခြင်း

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

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

css#parent {
  display: flex;
  place-content: start 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: flex;
  place-content: center end;
  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: flex;
  place-content: end start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ . Grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏အစနှင့် ရေပြင်ညီဝင်ရိုး၏အဆုံးသို့ ညှိခြင်း

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

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

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

Результат:

ဥပမာ . Grid တွင် ဒေါင်လိုက်ဝင်ရိုး၏ဗဟိုနှင့် ရေပြင်ညီဝင်ရိုး၏အစသို့ ညှိခြင်း

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

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

css#parent {
  display: grid;
  place-content: center 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 တွင် ဒေါင်လိုက်ဝင်ရိုး၏အဆုံးနှင့် ရေပြင်ညီဝင်ရိုး၏အစသို့ ညှိခြင်း

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

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

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

Результат:

သိသင့်သော အခြားအရာများ