CSS max-inline-size ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

定义和用法

max-inline-size 属性指定元素在行内方向上的最大尺寸。

如果内容在行内方向上的尺寸小于最大尺寸，则 max-inline-size ਅਟਰੀਬਿਊਟ ਮੁੱਲ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ。

ਜੇਕਰ ਕੰਟੈਂਟ ਦੀ ਲਾਈਨ ਇਨਲਾਈਨ ਦਿਸ਼ਾ ਵਿੱਚ ਸਾਈਜ਼ ਮਾਕਸ ਸਾਈਜ਼ ਤੋਂ ਵੱਧ ਹੁੰਦੀ ਹੈ ਤਾਂ ਇਹ ਲਾਗੂ ਹੋਵੇਗਾ: max-inline-size ਅਟਰੀਬਿਊਟ ਮੁੱਲ

ਨੋਟ:ਸਬੰਧਤ ਸੀਐੱਸਐੱਸ ਅਟਰੀਬਿਊਟ writing-mode ਲਾਈਨ ਇਨਲਾਈਨ ਦਿਸ਼ਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਇਹ ਇਹ ਪ੍ਰਭਾਵਿਤ ਕਰੇਗਾ: max-inline-size ਦੇ ਨਤੀਜੇ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ।ਇੰਗਲਿਸ਼ ਪੰਨਿਆਂ ਵਿੱਚ ਬਲਕ ਦਿਸ਼ਾ ਨਿਚੋਰ ਹੈ ਅਤੇ ਲਾਈਨ ਇਨਲਾਈਨ ਦਿਸ਼ਾ ਹੋਰ ਪੱਛਮ ਤੋਂ ਪੂਰਬ ਹੁੰਦੀ ਹੈ。

ਸੀਐੱਸਐੱਸ max-inline-size ਅਟਰੀਬਿਊਟ ਨੇ ਸੀਐੱਸਐੱਸ ਅਟਰੀਬਿਊਟ ਨਾਲ max-height ਅਤੇ max-width ਬਹੁਤ ਸਮਾਨ, ਪਰ max-inline-size ਅਟਰੀਬਿਊਟ ਨੇ ਲਾਈਨ ਇਨਲਾਈਨ ਦਿਸ਼ਾ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

60 ਪਿਕਸਲ ਦਾ ਮਾਕਸ ਇਨ-ਸਾਈਜ਼ ਸੈਟ ਕਰੋ:

div {
  max-inline-size: 60px;
}

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

ਉਦਾਹਰਣ 2: ਲਿਖਣ ਦਾ ਮੋਡ

ਦਾ <div> ਏਲੀਮੈਂਟ ਦੀ writing-mode ਅਟਰੀਬਿਊਟ ਵਾਲਾ vertical-rl ਤੇ ਸੈਟ ਕੀਤੇ ਹੋਏ ਹੋਣ ਤੇ ਲਾਈਨ ਇਨਲਾਈਨ ਦਿਸ਼ਾ ਸਾਇਡ ਤੋਂ ਨਿਚੋਰ ਹੋ ਜਾਵੇਗੀ, ਇਹ ਇਹ ਪ੍ਰਭਾਵਿਤ ਕਰੇਗਾ: max-inline-size ਅਟਰੀਬਿਊਟ ਦਾ ਕੰਮ ਕਰਨ ਦਾ ਤਰੀਕਾ:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

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

ਉਦਾਹਰਣ 3: Max-inline-size vs Inline-size

ਇੱਕ <div> ਏਲੀਮੈਂਟ (inline-size 100px (ਕੰਟੈਂਟ ਸਾਈਜ਼ ਬਦਲਣ ਵਾਲੇ ਵੱਖ-ਵੱਖ ਪ੍ਰਤੀਕਿਰਿਆ):max-inline-size 100px (ਕੰਟੈਂਟ ਸਾਈਜ਼ ਬਦਲਣ ਵਾਲੇ ਵੱਖ-ਵੱਖ ਪ੍ਰਤੀਕਿਰਿਆ):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

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

ਸੀਐੱਸਐੱਸ ਗਰੈਮੇਟਰਕ

ਮੈਕਸਇਨਲਾਈਨਸਾਈਜ਼: ਆਟੋ|ਲੈਂਗਥ|ਮੂਲਤਵੀ ਮੁੱਲ|ਵਿਰਾਸਤ|;

ਅਟਰੀਬਿਊਟ ਮੁੱਲ

ਤਕਨੀਕੀ ਵੇਰਵਾ

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

ਸਟੇਬਲ ਵਿੱਚ ਦਿਸਾਈ ਗਿਆ ਇਹ ਇਸ ਲੋੜ ਦੀ ਪਹਿਲੀ ਸਰਵਿਸ ਵਰਜਨ ਹੈ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰੀ:CSS inline-size ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀ:CSS min-inline-size ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਲਾਹਦਾਰੀ:CSS max-height ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਲਾਹਦਾਰੀ:CSS max-width ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਲਾਹਦਾਰੀ:CSS writing-mode ਪ੍ਰਾਪਰਟੀ