CSS فلیکس ڈائریکشن کی اپریٹی

تعریف اور استعمال

فلیکس-ڈائریکشن اپریئٹر فلیکس پروجیکٹ کی سمت طے کرتا ہے。

نوٹ:اگر عنصر اصلاء پروجیکٹ نہیں ہوتا تو فلیکس اپریئٹر ناکارگر ہوتا ہے。

ਹੋਰ ਦੇਖੋ:

CSS ਸਿੱਖਿਆਬੋਧਨ:CSS ਫਲੈਕਸ ਬੌਕਸ

CSS ਜਾਣਕਾਰੀ ਮੁੱਲਕਿਟ:flex ਗੁਣ

CSS ਜਾਣਕਾਰੀ ਮੁੱਲਕਿਟ:flex-basis ਗੁਣ

CSS ਜਾਣਕਾਰੀ ਮੁੱਲਕਿਟ:flex-flow ਗੁਣ

CSS ਜਾਣਕਾਰੀ ਮੁੱਲਕਿਟ:flex-grow ਗੁਣ

CSS ਜਾਣਕਾਰੀ ਮੁੱਲਕਿਟ:flex-shrink ਗੁਣ

CSS ਜਾਣਕਾਰੀ ਮੁੱਲਕਿਟ:flex-wrap ਗੁਣ

HTML DOM ਜਾਣਕਾਰੀ ਮੁੱਲਕਿਟ:flexDirection ਗੁਣ

ਉਦਾਹਰਣ

ਜਿਹਾਂ ਨਾਲ <div> ਉਪਕਰਣ ਵਿੱਚ ਫਲੈਕਸਬਲ ਉਪਕਰਣ ਦੀ ਦਿਸ਼ਾ ਨੂੰ ਉਲਟ ਸੈੱਟ ਕਰੋ:

div {
  display: flex;
  flex-direction: row-reverse; 
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

CSS ਗਰੰਥ

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
row ਮੂਲਭੂਤ ਮੁੱਲ:
row-reverse ਸਮਾਨ ਸਿਰਲੇਖ, ਪਰ ਪਿੱਛੇ ਲੈਣ ਵਾਲਾ ਹੈ。
column ਸਿਰਲੇਖ ਵਜੋਂ, ਉੱਚੇ ਤੋਂ ਹੇਠਲੇ ਤੱਕ ਸਥਾਨਾਂ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ。
column-reverse ਸਮਾਨ ਸਿਰਲੇਖ, ਪਰ ਪਿੱਛੇ ਲੈਣ ਵਾਲਾ ਹੈ。
initial ਇਸ ਗੁਣ ਨੂੰ ਮੂਲਭੂਤ ਮੁੱਲ ਨੂੰ ਸੈੱਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit ਇਸ ਗੁਣ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਉਪਕਰਣ ਤੋਂ ਵਿਰਾਸਤ ਕਰੋ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲਭੂਤ ਮੁੱਲ: row
ਵਿਰਾਸਤ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ: ਸਮਰਥਨ ਨਹੀਂ ਹੈ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ。
ਸੰਸਕਰਣ: CSS3
JavaScript ਵਿਚਾਰ object.style.flexDirection="column-reverse"

ਹੋਰ ਉਦਾਹਰਣ

flex-direction ਅਤੇ ਮੀਡੀਆ ਕਿਰਿਆ ਦੀ ਮਦਦ ਨਾਲ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼/ਉਪਕਰਣ ਲਈ ਵੱਖ-ਵੱਖ ਬੈਂਕ ਬਣਾਓ:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਸਾਈਟ - ਇੱਕ ਪੱਖੀ ਬੈਂਕ (100％) ਬਜਾਰੀ ਦੋ ਪੱਖੀ ਬੈਂਕ (50％) ਬਜਾਰੀ ਦੇ ਬਜਾਰੀ */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

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

ਸਾਰੇ ਪੰਨਿਆਂ ਵਿੱਚ ਨੰਬਰ ਇਹ ਪਹਿਲੀ ਬਰੀਕੀ ਵਿੱਚ ਇਸ ਗੁਣ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਜੋ ਨੰਬਰ -webkit- ਜਾਂ -moz- ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ, ਉਹ ਪ੍ਰਾਥਮਿਕ ਪ੍ਰਤੀਕ ਦੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਦਾ ਉਪਯੋਗ ਕਰਨ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਚਰਮੀ IE / ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0