بوتسٹرپ 5 فلیکس

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 1</div>
  <div class="p-2 bg-warning">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 2</div>
  <div class="p-2 bg-primary">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 3</div>

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 1</div>
  <div class="p-2 bg-warning">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 2</div>
  <div class="p-2 bg-primary">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 3</div>

亲自试一试

ਹੰਗਮੈਨ ਦਿਸ਼ਾ

ਇਸਤੇਮਾਲ ਕਰੋ .flex-row flex ਆਈਟਮਾਂ ਨੂੰ ਹੰਗਮੈਨ ਵਿੱਚ ਵਿਖਾਓ (ਇੱਕ ਦੂਜੇ ਨਾਲ ਸਮਾਨ ਚੌਦਾਰ ਕੀਤਾ ਜਾਵੇਗਾ)। ਇਹ ਮੂਲ ਸੈਟਿੰਗ ਹੈ。

<div class="p-2 bg-primary flex-grow-1">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 3</div>ਆਟੋਮੈਟਿਕ ਬਾਹਰੀ ਮਾਰਜਿਨ .flex-row-reverse ਸਮਾਨ ਚੌਦਾਰ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਸਮਾਨ ਚੌਦਾਰ ਕਰੋ:

实例

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 1</div>
  <div class="p-2 bg-warning">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 2</div>
  <div class="p-2 bg-primary">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 3</div>

ਵਰਤਿਕੀ ਦਿਸ਼ਾ

ਇਸਤੇਮਾਲ ਕਰੋ .flex-column flex ਆਈਟਮਾਂ ਨੂੰ ਸਿਰਫ ਵਰਤਿਕੀ ਵਿੱਚ ਵਿਖਾਓ (ਇੱਕ ਦੂਜੇ ਉੱਤੇ ਸਟੋਕ ਕੀਤਾ ਜਾਵੇਗਾ), ਜਾਂ ਇਸ ਦੀ ਜਗ੍ਹਾ ਉੱਤੇ ਇਸ ਨੂੰ ਵਰਤੋ .flex-column-reverse ਉੱਥੇ ਲੰਘਦੀ ਪਰਿਭਾਸ਼ਾ ਵਿੱਚ ਉਲਟ ਕਰੋ:

实例

<div class="d-flex flex-column">
  <div class="p-2 bg-info">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 1</div>
  <div class="p-2 bg-warning">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 2</div>
  <div class="p-2 bg-primary">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 3</div>

ਪਰੋਜੈਕਟ ਨੂੰ ਜੋੜੋ

ਆਟੋਮੈਟਿਕ ਬਾਹਰੀ ਮਾਰਜਿਨ .justify-content-* ਵਰਗ ਫਲੈਕਸਬਲ ਆਈਟਮਾਂ ਦੇ ਅਲਿਗਨਮੈਂਟ ਨੂੰ ਬਦਲ ਸਕਦਾ ਹੈ। ਵਧੀਆ ਵਰਗ ਹਨ:：

• start（默认）
• end
• center
• between
• around

实例

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

亲自试一试

ਸਮਾਨ ਚੌਦਾਰ

ਸੁਝਾਅ: .flex-fill ਇਹਨਾਂ ਨੂੰ ਮਜ਼ਬੂਤੀ ਨਾਲ ਸਮਾਨ ਚੌਦਾਰ ਕਰ ਸਕਦੇ ਹੋ

实例

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">ਫਲੈਕਸਬਲ ਆਈਟਮ 1</div>
  <div class="p-2 bg-warning flex-fill">ਫਲੈਕਸਬਲ ਆਈਟਮ 2</div>
  <div class="p-2 bg-primary flex-fill">ਫਲੈਕਸਬਲ ਆਈਟਮ 3</div>

ਵਧਾਓ

ਸੁਝਾਅ: .flex-grow-1 ਜਿਆਦਾ ਸਥਾਨ ਹੋ ਸਕਦਾ ਹੈ। ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ ਪਹਿਲੇ ਦੋ flex ਆਈਟਮ ਜ਼ਰੂਰੀ ਸਥਾਨ ਹੋਣ ਦੇ ਨਾਲ-ਨਾਲ ਆਖਰੀ ਆਈਟਮ ਬਾਕੀ ਮੁਕਤ ਸਥਾਨ ਹੋਣ ਦਾ ਹੈ:

实例

<div class="d-flex">
  <div class="p-2 bg-info">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 1</div>
  <div class="p-2 bg-warning">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 2</div>
  
弹性项目 3

ਕ੍ਰਮ

ਆਟੋਮੈਟਿਕ ਬਾਹਰੀ ਮਾਰਜਿਨ ਇਹ ਜ਼ਰੂਰਤ ਹੋਣ 'ਤੇ ਸਖਤੀ ਨਾਲ ਸਖਤੀ ਹੋ ਸਕਦਾ ਹੈ。 .order

实例

<div class="d-flex bg-secondary">
  ਵਰਗ ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ ਦੀ ਦਿਸ਼ਾ-ਸ਼੍ਰੇਣੀ ਬਦਲ ਸਕਦਾ ਹੈ। ਪ੍ਰਭਾਵੀ ਵਰਗ 0 ਤੋਂ 5 ਤੱਕ ਹਨ، ਕਿਉਂਕਿ ਸਭ ਤੋਂ ਘੱਟ ਸੰਖਿਆ ਦਾ ਵਰਗ ਸਭ ਤੋਂ ਉੱਚੀ ਪ੍ਰਾਥਮਿਕਤਾ ਰੱਖਦਾ ਹੈ (order-1 order-2 ਤੋਂ ਪਹਿਲਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ):
  <div class="p-2 bg-info order-3">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 1</div>
  <div class="p-2 bg-warning order-2">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 2</div>

<div class="p-2 bg-primary order-1">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 3</div>

ਆਟੋਮੈਟਿਕ ਬਾਹਰੀ ਮਾਰਜਿਨ .ms-auto（ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਵੱਲੋਂ ਹਟਾਉਣ ਵਾਲਾ）ਜਾਂ ਵਰਤੋਂ .me-auto（ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸੱਜੇ ਤਰਫ ਹਟਾਉਣ ਵਾਲਾ）ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਆਟੋਮੈਟਿਕ ਮਾਰਜਿਨ ਜੋੜਨਾ ਅਸਾਨ ਹੈ:

实例

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 1</div>
  <div class="p-2 bg-warning">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 2</div>
  <div class="p-2 bg-primary">ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ 3</div>

ਲਾਈਨ ਰੱਖੋ

ਦੁਆਰਾ .flex-nowrap（ਮੂਲਤਬੀ）、.flex-wrap ਜਾਂ .flex-wrap-reverse، ਫਲੈਕਸ ਪ੍ਰੋਜੈਕਟ ਕਿਵੇਂ ਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿੱਚ ਪੈਕ ਕੀਤੇ ਜਾਣ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ।

实例

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

亲自试一试

ਪਰੋਜੈਕਟ ਨੂੰ ਜੋੜੋ

ਇਸਤੇਮਾਲ ਕਰੋ .align-content-* ਜਨਰਲ ਕੰਟੈਂਟ ਵਰਤਾਰੇ ਦੀ ਵਿਸਥਾਰਤ ਸਥਿਤੀ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ। ਪ੍ਰਭਾਵੀ ਵਰਗ ਹਨ:

• .align-content-start（默认）
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch

ਟਿੱਪਣੀ:ਇਹ ਕਲਾਸਾਂ ਇੱਕ ਹੀ ਪਰਿਵਾਰ ਪ੍ਰਤੀਸਪਰਚ ਆਈਟਮਾਂ 'ਤੇ ਪ੍ਰਭਾਵ ਨਹੀਂ ਪਾਉਂਦੀਆਂ

ਹੇਠਾਂ ਦੇ ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਕੇ ਪੰਜ ਕਲਾਸਾਂ ਦਾ ਅੰਤਰ ਦੇਖੋ: ਪ੍ਰਤੀਸਪਰਚ ਆਈਟਮ ਦੀ ਖਿੱਚ ਪਾਰਟੀ ਸਥਿਤੀ ਬਦਲ ਕੇ

实例

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

亲自试一试

ਪਰੋਜੈਕਟ ਨੂੰ ਜੋੜੋ

ਇਸਤੇਮਾਲ ਕਰੋ .align-items-* ਕਲਾਸ ਕੰਟਰੋਲਇੱਕ ਹੀ ਪਰਿਵਾਰਪ੍ਰਤੀਸਪਰਚ ਆਈਟਮਾਂ ਦੀ ਖਿੱਚ ਪਾਰਟੀ ਸਥਿਤੀ

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch（默认）

ਹੇਠਾਂ ਦੇ ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਕੇ ਪੰਜ ਕਲਾਸਾਂ ਵਿਚਕਾਰ ਅੰਤਰ ਦੇਖੋ:

实例

<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

亲自试一试

ਸਵੈ-ਸਥਿਤੀ

ਇਸਤੇਮਾਲ ਕਰੋ .align-self-* ਕਲਾਸ ਕੰਟਰੋਲਪ੍ਰਤੀਸਪਰਚ ਆਈਟਮ ਨਿਰਦੇਸ਼ਿਤ ਕਰੋਦੀ ਖਿੱਚ ਪਾਰਟੀ ਸ਼ੈਲੀ

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch（默认）

单击下面的按钮查看五个类之间的区别：

实例

  
Flex item 1
  
Flex item 2
  
Flex item 3

亲自试一试

响应式 Flex 类

所有弹性类都带有额外的响应类，这使得在特定屏幕尺寸上设置特定 flex 类变得容易。

* 符号可以替换为 sm、md、lg、xl 或 xxl，分别代表小、中、大、超大和特大屏幕。

搜索特定的弹性类 ..

CodeW3C.com ਵੱਲੋਂ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਸਮਗਰੀ ਕੋਚਿੰਗ ਅਤੇ ਟੈਸਟ ਲਈ ਹੈ, ਸਮਗਰੀ ਦੀ ਸਹੀਅਤ ਨੂੰ ਨਹੀਂ ਯਕੀਨੀ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਇਸ ਸਾਇਟ ਦੇ ਕੰਟੈਂਟ ਦੀ ਵਰਤੋਂ ਨਾਲ ਆਉਣ ਵਾਲੇ ਜੋਖਮ ਇਸ ਸਾਇਟ ਨਾਲ ਸਬੰਧਤ ਨਹੀਂ ਹਨ। ਕਾਪੀਰਾਈਟ ਸਾਰੀਆਂ ਅਧਿਕਾਰ ਸੁਰੱਖਿਆ ਕੀਤੇ ਗਏ ਹਨ。

ਬਾਰੇ CodeW3C.com ਮਦਦ CodeW3C.com ਵਰਤੋਂ ਸੂਚਨਾ ਗੁੱਪ ਸੂਚਨਾ