CSS Flexbox

1
2
3
4
5
6
7
8

کام کریں

CSS Flexbox ਲੇਆਊਟ ਮੌਡਿਊਲ

Flexbox ਲੇਆਊਟ ਮੌਡਿਊਲ (ਜਿਸ ਨੂੰ ਜਾਰੀ ਕੀਤਾ ਗਿਆ) ਤੋਂ ਪਹਿਲਾਂ, ਉਪਲੱਬਧ ਲੇਆਊਟ ਮੋਡ ਹੇਠ ਲਿਖੇ ਚਾਰ ਹਨ:

  • ਬਲਾਕ (Block), ਜੋ ਕਿ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਕਿਸੇ ਹਿੱਸੇ (ਸੈਕਸ਼ਨ) ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ
  • ਅੰਤਰਲਿਖਤ (Inline), ਜੋ ਕਿ ਟੈਕਸਟ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ
  • ਸਾਰੀਆਂ ਦੋ-ਮੁੱਖੀ ਸਾਰਫਰਮੇਟ ਲਈ ਤਾਲਿਕਾ
  • ਸਥਾਨਾਂਤਰਣ, ਜੋ ਕਿ ਏਜੈਂਟ ਦੇ ਨਿਸ਼ਚਿਤ ਸਥਾਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ

ਫਲੈਕਸ ਬਾਕਸ ਲੇਆਊਟ ਮੌਡਿਊਲ, ਜੋ ਕਿ ਫਲੈਕਸੀਬਲ ਰੈਸਪੋਨਸਿਵ ਲੇਆਊਟ ਸਰੂਪ ਨਾਲ ਨਾਲ ਸਹੂਲਤ ਨਾਲ ਡਿਜਾਇਨ ਕਰਨ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਬਿਨਾ ਕਿ ਫਲੌਟਿੰਗ ਜਾਂ ਪਾਥਰਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ。

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

ਸਾਰੇ ਆਧੁਨਿਕ ਬਰਾਊਜ਼ਰਾਂ ਦਾ ਸਮਰਥਨ ਹੈ flexbox ਵਿਸ਼ੇਸ਼ਤਾ

29.0 11.0 22.0 10 48

Flexbox ਏਜੈਂਟ

ਜੇਕਰ ਤੁਸੀਂ Flexbox ਮਾਡਲ ਦੀ ਵਰਤੋਂ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਫਲੈਕਸ ਕੰਟੇਨਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਹੋਵੇਗਾ。

1
2
3

ਉੱਪਰ ਦੇ ਐਲੀਮੈਂਟ ਤਿੰਨ ਫਲੈਕਸ ਆਈਟਮਾਂ ਵਾਲੇ ਫਲੈਕਸ ਕੰਟੇਨਰ ਨੂੰ ਪ੍ਰਤੀਕ ਕਰਦੇ ਹਨ (ਨੀਲੇ ਖੇਤਰ)।

مثال

ਤਿੰਨ ਫਲੈਕਸ ਆਈਟਮਾਂ ਵਾਲਾ ਫਲੈਕਸ ਕੰਟੇਨਰ ਹੈ:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  
3

</div>

کام کریں

ਮਾਤਾ ਐਲੀਮੈਂਟ (ਕੰਟੇਨਰ):

ਦੁਆਰਾ display ਲੱਛਣ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ: flexਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿਸਤਾਰਕ ਹੋਵੇਗਾ:

1
2
3

مثال

.flex-container {
  display: flex;
}

کام کریں

ਹੇਠ ਫਲੈਕਸ ਕੰਟੇਨਰ ਲੱਛਣ ਹਨ:

flex-direction نمائش

flex-direction ਲੱਛਣ ਕੰਟੇਨਰ ਨੂੰ ਕਿਸ ਦਿਸ਼ਾ ਵਿੱਚ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਢਾਲਣਾ ਹੈ ਉਸ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

1
2
3

مثال

column ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਸਿਰਧਾਰਨ ਕਰਦਾ ਹੈ (ਉੱਪਰ ਤੋਂ ਨੀਚੇ):

.flex-container {
  display: flex;
  flex-direction: column;
}

کام کریں

مثال

column-reverse ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਸਿਰਧਾਰਨ ਢਾਲੇ ਹੋਏ (ਨੀਚੇ ਤੋਂ ਉੱਪਰ):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

کام کریں

مثال

row ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਹੰਗਾਮੀ ਢਾਲੇ ਹੋਏ (ਪੂਰਬ ਤੋਂ ਪੱਛਮ ਵੱਲ):

.flex-container {
  display: flex;
  flex-direction: row;
}

کام کریں

مثال

row-reverse ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਹੰਗਾਮੀ ਢਾਲੇ ਹੋਏ (ਪੱਛਮ ਤੋਂ ਪੂਰਬ ਵੱਲ):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

کام کریں

flex-wrap نمائش

flex-wrap ਲੱਛਣ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਪਰਿਵਰਤਨ ਕਰਨ ਦੀ ਨੀਤੀ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ 12 ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਸਮੇਤ ਹੈ ਤਾਂਕਿ flex-wrap ਲੱਛਣ ਨੂੰ ਬਿਹਤਰ ਦਿਖਾਇਆ ਜਾ ਸਕੇ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

مثال

wrap ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਜ਼ਰੂਰਤ ਹੋਣ ਤੇ ਪਰਿਵਰਤਨ ਕਰਦਾ ਹੈ:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

کام کریں

مثال

nowrap ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਪਰਿਵਰਤਨ ਕਰਨ ਦੀ ਨੀਤੀ ਨਹੀਂ ਦਿੰਦਾ (ਮੂਲ ਮੁੱਲ):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

کام کریں

مثال

wrap-reverse ਮੁੱਲ ਜ਼ਰੂਰਤ ਹੋਣ ਤੇ ਫਲੈਕਸ ਆਈਟਮ ਵਿਰੁੱਧ ਕਰਨ ਵਿੱਚ ਪਰਿਵਰਤਨ ਕਰਦਾ ਹੈ:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

کام کریں

flex-flow نمائش

flex-flow ਲੱਛਣ ਫਲੈਕਸ-ਡਾਇਰੈਕਸ਼ਨ ਅਤੇ flex-wrap ਲੱਛਣਾਂ ਨੂੰ ਸਾਥ-ਸਾਥ ਸੈਟ ਕਰਨ ਲਈ ਸ਼ਾਬਦਿਕ ਲੱਛਣ ਹੈ。

مثال

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

کام کریں

justify-content نمائش

justify-content ਲੱਛਣ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਸਿਰਧਾਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ:

1
2
3

مثال

center ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਸਿਰਧਾਰਨ ਕਰਦਾ ਹੈ:

.flex-container {
  display: flex;
  justify-content: center;
}

کام کریں

مثال

flex-start ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਸਿਰਧਾਰਨ ਕਰਦਾ ਹੈ(ਮੂਲ ਮੁੱਲ):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

کام کریں

مثال

flex-end ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਅੰਤ ਵਿੱਚ ਸਿਰਧਾਰਨ ਕਰਦਾ ਹੈ:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

کام کریں

مثال

space-around ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮ ਵਿੱਚ ਪਹਿਲਾਂ, ਦਰਮਿਆਨ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਸਪੇਸ ਨਾਲ ਦਿਖਾਉਂਦਾ ਹੈ:

.flex-container {
  display: flex;
  justify-content: space-around;
}

کام کریں

مثال

space-between ਮੁੱਲ ਫਲੈਕਸ ਆਈਟਮ ਵਿੱਚ ਪਾਰਸੈਪਸ਼ਨ ਦਿਖਾਉਂਦਾ ਹੈ:

.flex-container {
  display: flex;
  justify-content: space-between;
}

کام کریں

align-items نمائش

align-items ਲੱਛਣ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਸਿਰਧਾਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

1
2
3

ਇਨ੍ਹਾਂ ਉਦਾਹਰਨਾਂ ਵਿੱਚ ਅਸੀਂ 200 ਪਿਕਸਲ ਉੱਚਾ ਕੰਟੇਨਰ ਵਰਤਦੇ ਹਾਂ ਤਾਂਕਿ align-items ਲੱਛਣ ਨੂੰ ਬਿਹਤਰ ਦਿਖਾਇਆ ਜਾ ਸਕੇ。

مثال

center 值将 flex 项目在容器中间对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

کام کریں

مثال

flex-start 值将 flex 项目在容器顶部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

کام کریں

مثال

flex-end 值将弹性项目在容器底部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

کام کریں

مثال

stretch 值拉伸 flex 项目以填充容器（默认）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

کام کریں

مثال

baseline 值使 flex 项目基线对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

کام کریں

注意：该例使用不同的 font-size 来演示项目已按文本基线对齐：

1
2
3
4

align-content نمائش

align-content 属性用于对齐弹性线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ان مثالوں میں، ہم 600 پیکسلو کے کونٹینر کا استعمال کرتے ہیں، اور flex-wrap کی قیمتیں wrap میں سیٹ کرتے ہیں تاکہ align-content کی نمائش بہتر ہو سکے。

مثال

space-between مقدار لطیف لائن کے درمیان مساوی فاصلے دکھاتا ہے:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

کام کریں

مثال

space-around مقدار لطیف لائن کو قبل، درمیان اور بعد میں خالی علاقوں کے ساتھ دکھاتا ہے:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

کام کریں

مثال

stretch مقدار لطیف لائن کو فتح کرکے باقی علاقے کا حامل بناتا ہے (دفعہ میں):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

کام کریں

مثال

center مقدار کا نشر کونٹینر کے درمیان میں ہوتا ہے:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

کام کریں

مثال

flex-start مقدار کا نشر کونٹینر کی شروعات میں ہوتا ہے:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

کام کریں

مثال

flex-end مقدار کا نشر کونٹینر کی آخری سرحد پر ہوتا ہے:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

کام کریں

کاملاً مرکزیت

ایک بہت عام سٹائل کی مسائل کو حل کریں گے، جو کا نام 'کاملاً مرکزیت' ہے:

حل: یہ justify-content اور align-items قیمتیں مرکز میں سیٹ کی جاتی ہیں، پھر flex پروجیکٹز کا اچھا مرکزیت ہوگا:

مثال

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

کام کریں

ذیلی عناصر (پروجیکٹ)

flex کونٹینر کے براہ راست ذیلی عناصر خودکار طور پر لطیف (flex) پروجیکٹ میں بنائی جاتی ہیں。

1
2
3
4

上面的元素代表一个灰色 flex 容器内的四个蓝色 flex 项目。

مثال

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  
3
 
  <div>4</div>
</div>

کام کریں

用于弹性项目的属性有：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order 属性

order 属性规定 flex 项目的顺序。

1
2
3
4

代码中的首个 flex 项目不必在布局中显示为第一项。

order 值必须是数字，默认值是 0。

مثال

order 属性可以改变 flex 项目的顺序：

<div class="flex-container">
  
1

  
2

  
3
 
  
4

</div>

کام کریں

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

1
2
3

ਇਹ ਮੁੱਲ ਨਿਊਨੀ ਦਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਮੂਲ ਮੁੱਲ 0 ਹੈ。

مثال

使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

کام کریں

flex-shrink ਪ੍ਰਤੀਯੋਗਿਤਾ

flex-shrink ਪ੍ਰਤੀਯੋਗਿਤਾ ਕੋਈ ਫਲੈਕਸੀ ਆਈਟਮ ਦੀ ਹੋਰ ਫਲੈਕਸੀ ਆਈਟਮਾਂ ਦੇ ਤੁਲਨਾ ਵਿੱਚ ਘਟਣ ਵਾਲੀ ਮਾਤਰਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

1
2
3
4
5
6
7
8
9

ਇਹ ਮੁੱਲ ਨਿਊਨੀ ਦਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਮੂਲ ਮੁੱਲ 0 ਹੈ。

مثال

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

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

کام کریں

flex-basis ਪ੍ਰਤੀਯੋਗਿਤਾ

flex-basis ਪ੍ਰਤੀਯੋਗਿਤਾ flex 项目的ਮੂਲ ਲੰਬਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

1
2
3
4

مثال

ਤੀਜੇ ਫਲੈਕਸੀ ਆਈਟਮ ਦੀ ਮੂਲ ਲੰਬਾਈ 200 ਪਿਕਸਲ ਸੈਟ ਕਰੋ:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

کام کریں

flex ਪ੍ਰਤੀਯੋਗਿਤਾ

flex ਪ੍ਰਤੀਯੋਗਿਤਾ flex-grow, flex-shrink ਅਤੇ flex-basis ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਦਾ ਸ਼ਾਬਦਿਕ ਰੂਪ ਹੈ。

مثال

ਤੀਜੇ ਫਲੈਕਸੀ ਆਈਟਮ ਨੂੰ ਵਧਣ ਵਾਲਾ (0), ਘਟਣ ਵਾਲਾ (0) ਅਤੇ ਮੂਲ ਲੰਬਾਈ 200 ਪਿਕਸਲ ਹੋਵੇ:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

کام کریں

align-self ਪ੍ਰਤੀਯੋਗਿਤਾ

align-self ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿੱਚ ਲੈਣ ਵਾਲੇ ਫਲੈਕਸੀ ਕੰਟੇਨਰ ਦੇ ਚੁਣੇ ਹੋਏ ਆਈਟਮਾਂ ਦੇ ਜਸਤੇ ਮੁੱਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

align-self پروپریٹی کانٹینر کی align-items پروپریٹی کی دفعتی طرح آلینگھتارتی ہے جو اس کی طرف سے مقرر کی گئی ہوتی ہے۔

1
2
3
4

ان مثالوں میں، ہم 200 پیکسلو اونچائی والا کانٹینر استعمال کرتے ہیں تاکہ align-self پروپریٹی کو بہتر دکھایا جاسکے:

مثال

تیسرے فلکس پروجیکٹ کو کانٹینر کی وسط میں آلینگھتا:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

کام کریں

مثال

دوسرے فلکس پروجیکٹ کو کانٹینر کی اوپر آلینگھتا، تیسرے فلکس پروجیکٹ کو کانٹینر کی نیچل آلینگھتا:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

کام کریں

فلیکس بیکس کا استعمال کرکے ریسپانسیو تصویر گالری

فلیکس بیکس کا استعمال کرکے ریسپانسیو تصویر گالری بنائی جائی، جو اسکرین کی بڑائی کے مطابق چار تصویر، دو تصویر یا پورا چوٹی تصویر کے درمیان تبدیل ہوتی ہے:

کام کریں

فلیکس بیکس کا استعمال کرکے ریسپانسیو ویب سائٹ

فلیکس بیکس کا استعمال کرکے ایک ریسپانسیو ویب سائٹ بنائی جائی، جس میں ریسپانسیو ناویگیشن بار اور ریسپانسیو کنٹینر شامل ہیں:

کام کریں

سی ایس ایس فلیکس بیکس پروپریٹی

ایک ٹیبل میں درج کیا گیا ہے جو فلیکس باکس کے ساتھ استعمال کئے جانے والی سی ایس ایس پروپریٹیوں کو درج کرتی ہے:

پروپریٹی ویژن
display ایچ ٹی ایم ایل عناصر کا بکس کی نوعیت کو مقرر کرتی ہے۔
flex-direction فلکس کانٹینر کے اندر فلکس پروجیکٹس کی سمت کو مقرر کرتی ہے۔
justify-content جب فلکس پروجیکٹس پر مبنی ایکوسینٹر پر سارے قابل استعمال فضائیں استعمال نہ کی جاتی ہیں تو ان کو افقی طرح آلینگھتا ہے۔
align-items جب فلکس پروجیکٹس پر مبنی ایکوسینٹر پر سارے قابل استعمال فضائیں استعمال نہ کی جاتی ہیں تو ان کو وپارتی طرح آلینگھتا ہے۔
flex-wrap فلکس پروجیکٹس کو آگے لے جانے کا فیصلہ کرتی ہے، اگر ایک فلکس لائن میں ان کے لئے کافی جگہ نہیں ہوتی تو ان کو نیچے لے جانا ہوتا ہے۔
align-content flex-wrap پروپریٹی کا کام بدل دیتا ہے۔ اس کی طرح ہی align-items سے مشابہت رکھتی ہے لیکن یہ فلکس پروجیکٹس کو نہیں آلینگھتا، بلکہ فلکس لائن کو آلینگھتا ہے۔
flex-flow flex-direction اور flex-wrap کی لگنتی پروپریٹی。
order فلکس پروجیکٹس کی ترتیب کو مقرر کرتی ہے جو ایک ہی کانٹینر میں موجود ہیں۔
align-self فلکس پروجیکٹس کے لئے استعمال کی جاتی ہیں۔ انٹرنل آئیٹمز کی align-items پروپریٹی پر اثر انداز دیتا ہے。
flex flex-grow、flex-shrink اور flex-basis کی لگنتی پروپریٹی。