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

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

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

cssselector {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

တန်ဖိုးများ

စံထားရှိသော တန်ဖိုး: stretch.

ဥပမာ . stretch တန်ဖိုး

လက်ရှိတွင် အဓိကဝင်ရိုးသည် ဘယ်မှညာသို့ ဦးတည်နေပြီး၊ ကန့်လန့်ဝင်ရိုးတစ်လျှောက် အစုအဝေးများသည် အမြင့်အပြည့် ဆန့်ထုတ်ထားသည်:

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

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

ဥပမာ . stretch တန်ဖိုး + အစုအဝေးအရွယ်အစား

လက်ရှိတွင် အစုအဝေးများအတွက် အကျယ်နှင့် အမြင့် သတ်မှတ်ထားသောကြောင့်၊ align-items ဂုဏ်သတ္တိအတွက် stretch တန်ဖိုးကို လျစ်လျူရှုထားမည်:

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

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ . အစုအဝေးအရွယ်အစားမပါဘဲ flex-start တန်ဖိုး

လက်ရှိတွင် အစုအဝေးများသည် အပေါ်ဖက်သို့ ကပ်ထားမည်:

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

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

ဥပမာ . flex-start တန်ဖိုး + အစုအဝေးအရွယ်အစား

လက်ရှိတွင် အစုအဝေးများသည် ဆက်လက်ပြီး အပေါ်ဖက်သို့ ကပ်ထားမည်၊ သို့သော် ၎င်းတို့တွင် သတ်မှတ်ထားသော အကျယ်နှင့် အမြင့် ရှိမည်:

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

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ . flex-end တန်ဖိုး + အစုအဝေးအရွယ်အစား

လက်ရှိတွင် အစုအဝေးများသည် အောက်ဖက်သို့ ကပ်ထားမည်:

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

css#parent {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  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>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ . center တန်ဖိုး၊ အရွယ်အစားမတူညီသော အစုအဝေးများ

လက်ရှိတွင် အစုအဝေးများတွင် အမြင့်အရ အရွယ်အစားမတူညီကြပါ (လက်ရှိတွင် ၎င်းတို့ကို စာသားဖြင့် ခွဲထုတ်ထားသော်လည်း height ကိုလည်း သတ်မှတ်နိုင်သည်)၊ အကျယ်မှာ အားလုံးအတွက် တူညီသည်၊ အဘယ့်ကြောင့်ဆိုသော် width ဂုဏ်သတ္တိ သတ်မှတ်ထားသောကြောင့်:

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

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ . baseline တန်ဖိုး၊ အရွယ်အစားမတူညီသော အစုအဝေးများ

အခြေခံမျဉ်းအလိုက် ညှိခြင်းသည် ဤကဲ့သို့ ပုံပေါက်သည်:

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

css#parent {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 130px;
  line-height: 1;
  border: 1px solid #696989;
}

Результат:

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

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

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

css#parent {
  display: grid;
  align-items: flex-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 ကို browser debugger တွင် �ြည့်ရှုကြည့်ပါ:

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

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

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

css#parent {
  display: grid;
  align-items: 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;
}

Результат:

Debugger အတွင်း grid ၏ ဖော်ပြချက်ကို ကြည့်ရှုကြည့်ပါ:

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

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

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

css#parent {
  display: grid;
  align-items: 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;
}
#elem1 {

}

Результат:

ယခု ကျွန်ုပ်တို့၏ grid သည် debugger မှတဆင့် မည်သို့ပုံပေါ်သည်ကို ကြည့်ရှုကြည့်ပါ:

အခြားကြည့်ရန်