CSS فلیکس پرپریٹی

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

flex ਹੇਠ ਲਿਖੀਆਂ ਪ੍ਰਤੀਭਾਵਾਂ ਦਾ ਸ਼ਾਬਦਿਕ ਰੂਪ ਹੈ:

flex ਫਲੈਕਸੀਬਲ ਪ੍ਰੋਜੈਕਟ ਦੀ ਫਲੈਕਸੀਬਲ ਲੰਬਾਈ ਸੈਟ ਕਰਦਾ ਹੈ。

ਟਿੱਪਣੀ:ਜੇਕਰ ਇਲੈਕਟ੍ਰੋਨ ਫਲੈਕਸੀਬਲ ਪ੍ਰੋਜੈਕਟ ਨਹੀਂ ਹੈ ਤਾਂ flex ਲੋੜਦਾ ਪ੍ਰਾਪਤ ਨਹੀਂ ਹੁੰਦਾ ਹੈ。

ਹੋਰ ਜਾਣਕਾਰੀ ਦੇਖੋ:

ਸਿੱਖਿਆ: CSS ਲੈਜਸਟਿਕ ਬੋਕਸ

ਸਰੋਤ:CSS فلیکس بیسی پرپریٹی

ਸਰੋਤ:CSS فلیکس ڈائریکشن پرپریٹی

ਸਰੋਤ:CSS فلیکس فلو پرپریٹی

ਸਰੋਤ:CSS فلیکس گروو پرپریٹی

ਸਰੋਤ:CSS فلیکس شروک پرپریٹی

ਸਰੋਤ:CSS فلیکس ویپ پرپریٹی

ਸਰੋਤ:HTML DOM flex ਗੁਣ

ਉਦਾਹਰਣ

ਇਸ ਦੇ ਸਮਾਧਾਨ ਨੂੰ ਨਜ਼ਰ ਅੰਦਾਜ਼ ਕਰੋ, ਇਹ ਸਾਰੇ ਲੈਜਸਟਿਕ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਲੰਬਾਈ ਇੱਕ ਹੀ ਹੋਵੇ

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

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

CSS ਗਰੰਥ

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
flex-grow ਨੰਬਰ, ਪ੍ਰੋਜੈਕਟ ਦੇ ਬਾਕੀ ਹੋਰ ਲੈਜਸਟਿਕ ਪ੍ਰੋਜੈਕਟਾਂ ਦੇ ਨਾਲ ਵਧਣ ਦੇ ਪ੍ਰਤੀ ਸਮਾਨਤਾ ਦੇ ਪ੍ਰਤੀ ਸਖਤੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
flex-shrink ਨੰਬਰ, ਪ੍ਰੋਜੈਕਟ ਦੇ ਬਾਕੀ ਹੋਰ ਲੈਜਸਟਿਕ ਪ੍ਰੋਜੈਕਟਾਂ ਦੇ ਨਾਲ ਸਮਾਨਤਾ ਦੇ ਪ੍ਰਤੀ ਸਖਤੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
flex-basis

ਪ੍ਰੋਜੈਕਟ ਦੀ ਲੰਬਾਈ

ਪ੍ਰਮਾਣਿਕ ਮੁੱਲ: "auto", "inherit" ਜਾਂ "%", "px", "em" ਦੇ ਮੁੱਲ ਦੇ ਇਕਾਈਆਂ ਜਾਂ ਕਿਸੇ ਹੋਰ ਲੰਬਾਈ ਇਕਾਈ
auto ਇਕੱਲੇ 1 1 auto ਦੇ ਬਰਾਬਰ ਹੈ。
initial ਇਕੱਲੇ 0 0 auto ਦੇ ਬਰਾਬਰ ਹੈ।ਦੇਖੋ: initial.
none ਇਕੱਲੇ 0 0 auto ਦੇ ਬਰਾਬਰ ਹੈ。
inherit ਆਪਣੇ ਮਾਤਾ ਉਪਕਰਣ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਵਿਰਾਸਤ ਕਰੋ।ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: 0 1 auto
ਵਿਰਾਸਤੀ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਨਿਰਮਾਣ: ਸਮਰਥਨ ਹੈ।ਦੁਜੇ ਗੁਣਾਂ ਦੇ ਲਈ ਦੇਖੋ: ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ.
ਸੰਸਕਰਣ: CSS3
JavaScript ਗਰੰਥ object.style.flex="1"

ਹੋਰ ਉਦਾਹਰਣ

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

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਢਾਂਚਾ - ਦੋ ਕੋਲਾਂ ਦੀ ਥਾਂ ਇੱਕ ਕੋਲਾਂ (100%) ਦਾ ਢਾਂਚਾ ਬਣਾਓ */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

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

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

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

ਪਹਿਲੀ ਰੀਸ਼ੀਓਨ ਦੇ ਪ੍ਰਿਫਿਕਸ ਨਾਲ ਨੰਬਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ -webkit-,-ms- ਜਾਂ -moz- ਦਿਖਾਇਆ ਗਿਆ ਹੈ。

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