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

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

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

selector {
	place-content: main_axis cross_axis;
}

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

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

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

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

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

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

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

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

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

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

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

#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 တွင် ဒေါင်လိုက်ဝင်ရိုး၏အစနှင့် ရေပြင်ညီဝင်ရိုး၏အဆုံးသို့ ညှိခြင်း

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

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

#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 တွင် ဒေါင်လိုက်ဝင်ရိုး၏ဗဟိုနှင့် ရေပြင်ညီဝင်ရိုး၏အစသို့ ညှိခြင်း

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

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

#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 တွင် ဒေါင်လိုက်ဝင်ရိုး၏အဆုံးနှင့် ရေပြင်ညီဝင်ရိုး၏အစသို့ ညှိခြင်း

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

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

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

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

align-content ဂုဏ်သတ္တိ,
အကြောင်းမှာ ၎င်းသည် ဖြတ်ဝင်ရိုး သို့မဟုတ် ဒေါင်လိုက်ဝင်ရိုးတလျှောက် ညှိခြင်းကို သတ်မှတ်ပေးသည်
justify-content ဂုဏ်သတ္တိ,
အကြောင်းမှာ ၎င်းသည် အဓိကဝင်ရိုးတလျှောက် ညှိခြင်းကို သတ်မှတ်ပေးသည်