CSS جسیم-متن-ایتم

ਵਿਆਖਿਆ ਅਤੇ ਇਸਤੇਮਾਲ

justify-content ਪ੍ਰਾਪਰਟੀ (ਹੌਰੀਜ਼ਨਟਲ) ਫਲੈਕਸੀਬਲ ਕੰਟੇਨਰ ਦੀਆਂ ਵਸਤੂਆਂ ਨੂੰ ਸਮਾਯੋਜਨ ਕਰੇ, ਜਦੋਂ ਵਸਤੂਆਂ ਮੁੱਖ ਅਕਸ਼ 'ਤੇ ਸਾਰੇ ਉਪਲੱਬਧ ਸਥਾਨ ਨਹੀਂ ਲੈਂਦੀਆਂ।

ਸੁਝਾਅ:ਇਸਤੇਮਾਲ ਕਰੋ: align-items ਪ੍ਰਾਪਰਟੀ ਪ੍ਰਾਪਰਟੀ ਵਰਤੀ ਹੈ ਕਿ ਵਸਤੂਆਂ ਵਿਸਤਰਿਤ ਹੋਣ।

ਹੋਰ ਦੇਖੋ:

CSS ਟੂਰੀਮੈਂਟ:CSS flexbox

CSS ਟੂਰੀਮੈਂਟ:CSS Grid

CSS ਸੂਚਨਾਕ੍ਰਮalign-content ਪ੍ਰਾਪਰਟੀ

CSS ਸੂਚਨਾਕ੍ਰਮalign-items ਪ੍ਰਾਪਰਟੀ

CSS ਸੂਚਨਾਕ੍ਰਮalign-self ਵਿਸ਼ੇਸ਼ਤਾ

HTML DOM ਸੂਚਨਾਕ੍ਰਮjustifyContent ਵਿਸ਼ੇਸ਼ਤਾ

ਉਦਾਹਰਣ

ਫਲੈਕਸੀ ਵਿਸ਼ਾਂ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਮੱਧ ਵਿੱਚ ਜਮਾ ਕਰੋ:

div {
  display: flex;
  justify-content: center;
}

ਖੁਦ ਦੱਸੋ ਇੱਕ ਪ੍ਰਯੋਗ

ਪੰਨੇ ਦੇ ਨੇੜੇ ਹੋਰ TIY ਉਦਾਹਰਣ ਮਿਲ ਸਕਦੇ ਹਨ。

CSS ਵਿਗਿਆਨ

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

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

ਮੁੱਲ ਵਰਣਨ
flex-start ਮੂਲ ਮੁੱਲ। ਵਿਸ਼ਾਂ ਕੰਟੇਨਰ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਹੋਣਗੇ。
flex-end ਵਿਸ਼ਾਂ ਕੰਟੇਨਰ ਦੇ ਅੰਤ ਵਿੱਚ ਹੋਣਗੇ。
center ਵਿਸ਼ਾਂ ਕੰਟੇਨਰ ਦੇ ਮੱਧ ਵਿੱਚ ਹੋਣਗੇ。
space-between ਵਿਸ਼ਾਂ ਵਾਲੀਆਂ ਵਿੱਚ ਅੰਤਰ ਰੱਖਣਾ。
space-around ਵਿਸ਼ਾਂ ਸ਼ੁਰੂ ਵਿੱਚ, ਵਾਲੀਆਂ ਵਿੱਚ ਅਤੇ ਅੰਤ ਵਿੱਚ ਜਗ੍ਹਾ ਰੱਖਣਾ。
initial ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਮੂਲ ਮੁੱਲ ਰੱਖੇ। ਦੇਖੋ: initial。
inherit ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਆਪਣੇ ਮਾਤਾ ਤੇਲ ਤੋਂ ਵਿਰਾਸਤ ਕਰੇ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: flex-start
ਵਿਰਾਸਤੀ ਤੌਰ 'ਤੇ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰਥਨ ਨਹੀਂ ਹੈ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾ。
ਸੰਸਕਰਣ: CSS3
JavaScript ਵਿਗਿਆਨ: object.style.justifyContent="space-between"

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ

ਫਲੈਕਸੀ ਵਿਸ਼ਾਂ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਜਮਾ ਕਰੋ (ਮੂਲ ਮੁੱਲ):

div {
  display: flex;
  justify-content: flex-start;
}

ਖੁਦ ਦੱਸੋ ਇੱਕ ਪ੍ਰਯੋਗ

ਉਦਾਹਰਣ

ਫਲੈਕਸੀ ਵਿਸ਼ਾਂ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਅੰਤ ਵਿੱਚ ਜਮਾ ਕਰੋ:

div {
  display: flex;
  justify-content: flex-end;
}

ਖੁਦ ਦੱਸੋ ਇੱਕ ਪ੍ਰਯੋਗ

ਉਦਾਹਰਣ

ਵਾਲੀਆਂ ਵਿੱਚ ਫਲੈਕਸੀ ਅਣਗਿਣਤ ਵਿਸ਼ਾਂ ਦਾ ਅੰਤਰ ਰੱਖੋ:

div {
  display: flex;
  justify-content: space-between;
}

ਖੁਦ ਦੱਸੋ ਇੱਕ ਪ੍ਰਯੋਗ

ਉਦਾਹਰਣ

ਸ਼ੁਰੂ ਵਿੱਚ ਦਿਖਾਉਣ ਵਾਲੇ, ਵਾਲੀਆਂ ਵਿੱਚ ਅਤੇ ਅੰਤ ਵਿੱਚ ਦਿਖਾਉਣ ਵਾਲੇ ਫਲੈਕਸੀ ਅਣਗਿਣਤ ਵਿਸ਼ਾਂ ਦਾ ਅੰਤਰ ਰੱਖੋ:

div {
  display: flex;
  justify-content: space-around;
}

ਖੁਦ ਦੱਸੋ ਇੱਕ ਪ੍ਰਯੋਗ

ਬਰੌਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰੌਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਹੋਣ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਪਹਿਲੇ ਬਰੌਜ਼ਰ ਵਰਜਨ ਦਾ ਅੰਕ ਸਾਰੇ ਤੇਲਾਂ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ。

ਪਹਿਲਾਂ ਦੇ -webkit- ਜਾਂ -moz- ਨੂੰ ਅੰਕ ਦੇ ਪਹਿਲੇ ਵਰਜਨ ਦੇ ਪ੍ਰਤੀਕ ਨਾਲ ਵਰਤਣ ਦੀ ਸ਼ਰਤ ਹੈ。

ਵਿਸ਼ੇਸ਼ਤਾ Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0