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

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

Syntax

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

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`flex-start`	ဘလောက်များသည် ဘေးတိုက် (ဒေါင်လိုက်) ဝင်ရိုး၏ အစဖက်သို့ ကပ်နေသည်။
`flex-end`	ဘလောက်များသည် ဘေးတိုက် (ဒေါင်လိုက်) ဝင်ရိုး၏ အဆုံးဖက်သို့ ကပ်နေသည်။
`center`	ဘလောက်များသည် ဘေးတိုက် (ဒေါင်လိုက်) ဝင်ရိုး၏ အလယ်ဗဟိုတွင် တည်ရှိသည်။
`space-between`	ဘလောက်များသည် ဘေးတိုက် (ဒေါင်လိုက်) ဝင်ရိုးတလျှောက် ဖြန့်ကျက်ထားပြီး၊ ပထမဆုံး element သည် ဝင်ရိုး၏ အစဖက်သို့ ကပ်နေကာ နောက်ဆုံး element သည် ဝင်ရိုး၏ အဆုံးဖက်သို့ ကပ်နေသည်။
`space-around`	ဘလောက်များသည် ဘေးတိုက် (ဒေါင်လိုက်) ဝင်ရိုးတလျှောက် ဖြန့်ကျက်ထားပြီး၊ ပထမဘလောက်နှင့် ဝင်ရိုး၏အစကြား၊ နောက်ဆုံးဘလောက်နှင့် ဝင်ရိုး၏အဆုံးကြားရှိ ခြားနားချက်သည် ကျန်ဘလောက်များအကြားရှိ ခြားနားချက်နှင့် အတူတူပင်ဖြစ်သည်။ သို့ရာတွင်၊ ၎င်းတို့သည် ထင်သလောက် ညီမျှခြင်းမရှိပါ: ခြားနားချက်များကို ပေါင်းထည့်ထားသဖြင့် ဘလောက်နှစ်ခုကြား အကွာအဝေးသည် ဘလောက်တစ်ခုနှင့် ဝင်ရိုး၏အစ/အဆုံးကြား အကွာအဝေးထက် နှစ်ဆပိုကြီးသည်။

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

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

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

#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 အဖြစ် သတ်မှတ်ထားသောကြောင့်ဖြစ်သည်:

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

#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 တန်ဖိုး

ယခုအခါ ဘလောက်များသည် ဘေးတိုက်ဝင်ရိုး၏ အလယ်ဗဟိုတွင် ချိန်ညှိထားသည်:

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

#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 များအား ဒေါင်လိုက်ဝင်ရိုး၏ အစဖက်သို့ ချိန်ညှိမှုကို သတ်မှတ်ကြပါစို့:

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

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

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

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

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

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

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

flex-direction ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ ဝင်ရိုးဦးတည်ချက်ကို သတ်မှတ်ပေးသည်။
justify-content ဂုဏ်သတ္တိ,
သည် အဓိကဝင်ရိုးတလျှောက် ချိန်ညှိမှုကို သတ်မှတ်ပေးသည်။
align-items ဂုဏ်သတ္တိ,
သည် ဘေးတိုက်ဝင်ရိုးတလျှောက် ချိန်ညှိမှုကို သတ်မှတ်ပေးသည်။
flex-wrap ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ မျဉ်းကြောင်းအများအပြားရှိမှုကို သတ်မှတ်ပေးသည်။
flex-flow ဂုဏ်သတ္တိ,
flex-direction နှင့် flex-wrap အတွက် အတိုကောက်
order ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ အစဉ်လိုက်ကို သတ်မှတ်ပေးသည်။
align-self ဂုဏ်သတ္တိ,
သည် ဘလောက်တစ်ခု၏ ချိန်ညှိမှုကို သတ်မှတ်ပေးသည်။
place-content ဂုဏ်သတ္တိ,
သည် အဓိကနှင့် ဘေးတိုက်ဝင်ရိုးများတလျှောက် ချိန်ညှိမှုကို သတ်မှတ်ပေးသည်။