سی ایس ایس ایلائن آئٹمز کی خصوصیات

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

align-items ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਆਈਟਮਾਂ ਲਈ ਮੂਲ ਸਥਿਤੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਤੋਂ ਕਰੋ。

ਸੁਝਾਅ:ਹਰ ਆਈਟਮ ਦੀ align-self ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਇਸ align-items ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੋਂ ਕਰੋ。

ਇਸ ਨੂੰ ਵੀ ਦੇਖੋ:

CSS ਸਿੱਖਿਆਬੋਧਨ:CSS Grid

CSS ਸਿੱਖਿਆਬੋਧਨ:CSS Flexbox

CSS ਸੂਚਨਾ ਮੁੱਲਾਂਕਣ:align-content ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਸੂਚਨਾ ਮੁੱਲਾਂਕਣ:align-self ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਸੂਚਨਾ ਮੁੱਲਾਂਕਣ:justify-content ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਸੂਚਨਾ ਮੁੱਲਾਂਕਣ:justify-items ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਸੂਚਨਾ ਮੁੱਲਾਂਕਣ:justify-self ਵਿਸ਼ੇਸ਼ਤਾ

HTML DOM ਸੂਚਨਾ ਮੁੱਲਾਂਕਣ:alignItems ਵਿਸ਼ੇਸ਼ਤਾ

ਉਦਾਹਰਣ

ਸਾਰੇ ਫਲੈਕਸ <div> ਆਈਟਮਾਂ ਦੇ ਮੱਧ ਵਿੱਚ ਸਥਿਤ ਕਰੋ:

div {
  display: flex;
  align-items: center;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਗਰੰਥਕਾਰਾਂ:

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
stretch ਮੂਲ ਮੁੱਲ। ਆਈਟਮ ਕੰਟੇਨਰ ਨੂੰ ਸਮਾਯੋਜਿਤ ਕਰਨ ਲਈ ਆਈਟਮ ਨੂੰ ਸਟ੍ਰੈਚ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
center ਆਈਟਮ ਕੰਟੇਨਰ ਦੇ ਮੱਧ ਵਿੱਚ ਸਥਿਤ ਹੁੰਦਾ ਹੈ。
flex-start ਆਈਟਮ ਕੰਟੇਨਰ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਸਥਿਤ ਹੁੰਦਾ ਹੈ。
flex-end ਆਈਟਮ ਕੰਟੇਨਰ ਦੇ ਅੰਤ ਵਿੱਚ ਸਥਿਤ ਹੁੰਦਾ ਹੈ。
baseline ਆਈਟਮ ਕੰਟੇਨਰ ਦੀ ਬੇਸਲਾਈਨ ਤੇ ਸਥਿਤ ਹੁੰਦਾ ਹੈ。
initial ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਲੈ ਕੇ ਵਰਤੋਂ ਕਰੋ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: stretch
ਵਿਰਾਸਤੀ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰਥਨ ਨਹੀਂ ਹੈ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ。
ਸੰਸਕਰਣ: CSS3
JavaScript ਗਰੰਥਕਾਰਾਂ: object.style.alignItems="center"

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਪਹਿਲੀ ਬ੍ਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਸਬੰਧੀ ਸੰਖਿਆ ਸਾਰੇ ਟੇਬਲ ਵਿੱਚ ਦਿੱਤੀ ਗਈ ਹੈ。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0