CSS align-content ਪ੍ਰਾਪਰਟੀ

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

align-content ਵਿਸ਼ੇਸ਼ਤਾ ਸੰਸ਼ੋਧਨ flex-wrap ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਵਿਵਹਾਰ ਨਾਲ align-items ਇਹ ਸਮਾਨ ਹੈ, ਪਰ ਇਹ ਫਲੈਕਸੀ ਆਈਟਮਾਂ ਨੂੰ ਨਹੀਂ ਹਾਲਚਕਰ ਕਰਦਾ ਹੈ, ਬਲਕਿ ਫਲੈਕਸੀ ਲਾਈਨਾਂ ਨੂੰ ਹਾਲਚਕਰ ਕਰਦਾ ਹੈ。

ਧਿਆਨ:ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਕਾਰਜ ਕਰਨ ਲਈ ਬਹੁਤ ਸਾਰੇ ਲਾਈਨਾਂ ਦੇ ਆਈਟਮਾਂ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ!

ਸੁਝਾਅ:ਵਰਤੋਂ: justify-content ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਮੁੱਖ ਅਕਸਰ (main-axis) 'ਤੇ ਆਈਟਮਾਂ ਨੂੰ ਹੌਰੀਜ਼ੋਂਟਲ ਤਰੀਕੇ ਨਾਲ ਹਾਲਚਕਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

ਹੋਰ ਦੇਖੋ:

CSS ਸਿੱਖਿਆCSS Flexbox

CSS ਸਿੱਖਿਆCSS ਗ੍ਰਿੱਡ

CSS ਸੰਦਰਭ ਮੁੱਲਾਂਕਣ:align-items ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਸੰਦਰਭ ਮੁੱਲਾਂਕਣ:align-self ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਸੰਦਰਭ ਮੁੱਲਾਂਕਣ:justify-content ਵਿਸ਼ੇਸ਼ਤਾ

HTML DOM ਸੰਦਰਭ ਮੁੱਲਾਂਕਣ:alignContent ਵਿਸ਼ੇਸ਼ਤਾ

ਇੰਸਟੈਂਸ

ਲਾਈਨਾਂ ਫਲੈਕਸੀ ਕੰਟੇਨਰ ਦੇ ਮੱਧ ਵੱਲ ਬੰਟੀਆਂ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

ਆਪਣੇ ਆਪ ਮੱਤਲਬ ਕਰੋ

CSS ਗਰੈਫੀਕਸ

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

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

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

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਸਬੰਧੀ ਨੰਬਰ ਸਾਰੇ ਟੇਬਲ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਹਨ。

ਚਰਮੋਇਨ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਚਰਮੋਇਨ Edge ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
57.0 16.0 52.0 10.1 44.0