in English

ਫਲੈਕਸ

ਜਵਾਬਦੇਹ ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਪੂਰੇ ਸੂਟ ਨਾਲ ਗਰਿੱਡ ਕਾਲਮਾਂ, ਨੈਵੀਗੇਸ਼ਨ, ਕੰਪੋਨੈਂਟਸ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਖਾਕੇ, ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਆਕਾਰ ਦਾ ਤੁਰੰਤ ਪ੍ਰਬੰਧਨ ਕਰੋ। ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਅਮਲਾਂ ਲਈ, ਕਸਟਮ CSS ਜ਼ਰੂਰੀ ਹੋ ਸਕਦਾ ਹੈ।

ਫਲੈਕਸ ਵਿਵਹਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ

displayਇੱਕ ਫਲੈਕਸਬਾਕਸ ਕੰਟੇਨਰ ਬਣਾਉਣ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ ਅਤੇ ਸਿੱਧੇ ਬੱਚਿਆਂ ਦੇ ਤੱਤ ਨੂੰ ਫਲੈਕਸ ਆਈਟਮਾਂ ਵਿੱਚ ਬਦਲੋ। ਫਲੈਕਸ ਕੰਟੇਨਰਾਂ ਅਤੇ ਆਈਟਮਾਂ ਨੂੰ ਵਾਧੂ ਫਲੈਕਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਅੱਗੇ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ।

ਮੈਂ ਇੱਕ flexbox ਕੰਟੇਨਰ ਹਾਂ!

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

ਮੈਂ ਇੱਕ ਇਨਲਾਈਨ ਫਲੈਕਸਬਾਕਸ ਕੰਟੇਨਰ ਹਾਂ!

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ .d-flexਅਤੇ ਲਈ ਵੀ ਮੌਜੂਦ ਹਨ .d-inline-flex।

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

ਦਿਸ਼ਾ

ਦਿਸ਼ਾ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿੱਚ ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੀ ਦਿਸ਼ਾ ਨਿਰਧਾਰਤ ਕਰੋ। ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ ਤੁਸੀਂ ਇੱਥੇ ਹਰੀਜੱਟਲ ਕਲਾਸ ਨੂੰ ਛੱਡ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਹੈ row। ਹਾਲਾਂਕਿ, ਤੁਹਾਨੂੰ ਅਜਿਹੀਆਂ ਸਥਿਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਇਸ ਮੁੱਲ ਨੂੰ ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਸੀ (ਜਿਵੇਂ ਜਵਾਬਦੇਹ ਖਾਕੇ)।

.flex-rowਇੱਕ ਲੇਟਵੀਂ ਦਿਸ਼ਾ (ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ) ਸੈੱਟ ਕਰਨ ਲਈ, ਜਾਂ ਉਲਟ .flex-row-reverseਪਾਸੇ ਤੋਂ ਹਰੀਜੱਟਲ ਦਿਸ਼ਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਵਰਤੋਂ।

ਫਲੈਕਸ ਆਈਟਮ 1

ਫਲੈਕਸ ਆਈਟਮ 2

ਫਲੈਕਸ ਆਈਟਮ 3

ਫਲੈਕਸ ਆਈਟਮ 1

ਫਲੈਕਸ ਆਈਟਮ 2

ਫਲੈਕਸ ਆਈਟਮ 3

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.flex-columnਲੰਬਕਾਰੀ ਦਿਸ਼ਾ ਸੈੱਟ ਕਰਨ ਲਈ, ਜਾਂ .flex-column-reverseਉਲਟ ਪਾਸੇ ਤੋਂ ਲੰਬਕਾਰੀ ਦਿਸ਼ਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਵਰਤੋਂ ।

ਫਲੈਕਸ ਆਈਟਮ 1

ਫਲੈਕਸ ਆਈਟਮ 2

ਫਲੈਕਸ ਆਈਟਮ 3

ਫਲੈਕਸ ਆਈਟਮ 1

ਫਲੈਕਸ ਆਈਟਮ 2

ਫਲੈਕਸ ਆਈਟਮ 3

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ flex-direction।

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

ਸਮੱਗਰੀ ਨੂੰ ਜਾਇਜ਼ ਠਹਿਰਾਓ

ਮੁੱਖ ਧੁਰੇ 'ਤੇ ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਬਦਲਣ ਲਈ flexbox ਕੰਟੇਨਰਾਂ 'ਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ justify-content(ਸ਼ੁਰੂ ਕਰਨ ਲਈ x-ਧੁਰਾ, y-ਧੁਰਾ ਜੇ flex-direction: column)। 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>

ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ justify-content।

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

ਆਈਟਮਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰੋ

ਕਰਾਸ ਧੁਰੇ 'ਤੇ ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਬਦਲਣ ਲਈ flexbox ਕੰਟੇਨਰਾਂ 'ਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ align-items(ਸ਼ੁਰੂ ਕਰਨ ਲਈ y-ਧੁਰਾ, x-ਧੁਰਾ ਜੇ flex-direction: column)। start, end, center, baseline, ਜਾਂ 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-items।

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

ਆਪਣੇ ਆਪ ਨੂੰ ਇਕਸਾਰ ਕਰੋ

ਕ੍ਰਾਸ ਧੁਰੇ 'ਤੇ ਉਹਨਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਬਦਲਣ ਲਈ flexbox ਆਈਟਮਾਂ 'ਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ align-self(ਸ਼ੁਰੂ ਕਰਨ ਲਈ y-ਧੁਰਾ, x-ਧੁਰਾ ਜੇ flex-direction: column)। ਉਹੀ ਵਿਕਲਪਾਂ ਵਿੱਚੋਂ ਚੁਣੋ ਜਿਵੇਂ align-items: start, end, center, baseline, ਜਾਂ stretch(ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ)।

ਫਲੈਕਸ ਆਈਟਮ

ਇਕਸਾਰ ਫਲੈਕਸ ਆਈਟਮ

ਫਲੈਕਸ ਆਈਟਮ

ਇਕਸਾਰ ਫਲੈਕਸ ਆਈਟਮ

ਫਲੈਕਸ ਆਈਟਮ

ਇਕਸਾਰ ਫਲੈਕਸ ਆਈਟਮ

ਫਲੈਕਸ ਆਈਟਮ

ਇਕਸਾਰ ਫਲੈਕਸ ਆਈਟਮ

ਫਲੈਕਸ ਆਈਟਮ

ਇਕਸਾਰ ਫਲੈਕਸ ਆਈਟਮ

ਫਲੈਕਸ ਆਈਟਮ

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ align-self।

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch

ਭਰੋ

.flex-fillਸਾਰੇ ਉਪਲਬਧ ਹਰੀਜੱਟਲ ਸਪੇਸ ਨੂੰ ਲੈਂਦੇ ਹੋਏ ਉਹਨਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਸਮਗਰੀ ਦੇ ਬਰਾਬਰ ਚੌੜਾਈ (ਜਾਂ ਉਹਨਾਂ ਦੀ ਸਮਗਰੀ ਉਹਨਾਂ ਦੇ ਬਾਰਡਰ-ਬਾਕਸਾਂ ਨੂੰ ਪਾਰ ਨਹੀਂ ਕਰਦੀ ਹੈ ਤਾਂ ਬਰਾਬਰ ਚੌੜਾਈ) ਵਿੱਚ ਮਜਬੂਰ ਕਰਨ ਲਈ ਭੈਣ-ਭਰਾ ਤੱਤਾਂ ਦੀ ਇੱਕ ਲੜੀ 'ਤੇ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

ਬਹੁਤ ਸਾਰੀ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਫਲੈਕਸ ਆਈਟਮ

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ flex-fill।

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

ਵਧੋ ਅਤੇ ਸੁੰਗੜੋ

.flex-grow-*ਉਪਲਬਧ ਥਾਂ ਨੂੰ ਭਰਨ ਲਈ ਫਲੈਕਸ ਆਈਟਮ ਦੀ ਵਧਣ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ । ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, .flex-grow-1ਤੱਤ ਬਾਕੀ ਬਚੀਆਂ ਦੋ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਲੋੜੀਂਦੀ ਥਾਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹੋਏ, ਉਪਲਬਧ ਸਾਰੀ ਥਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

ਫਲੈਕਸ ਆਈਟਮ

ਤੀਜੀ ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

.flex-shrink-*ਜੇਕਰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇੱਕ ਫਲੈਕਸ ਆਈਟਮ ਦੀ ਸੁੰਗੜਨ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ । ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਨਾਲ ਦੂਜੀ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ .flex-shrink-1ਇਸਦੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਸਮੇਟਣ ਲਈ ਮਜ਼ਬੂਰ ਕੀਤਾ ਗਿਆ ਹੈ, "ਸੁੰਗੜ ਕੇ" ਨਾਲ ਪਿਛਲੀ ਫਲੈਕਸ ਆਈਟਮ ਲਈ ਵਧੇਰੇ ਥਾਂ ਦੇਣ ਲਈ .w-100।

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ flex-growਅਤੇ ਲਈ ਵੀ ਮੌਜੂਦ ਹਨ flex-shrink।

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1

ਆਟੋ ਮਾਰਜਿਨ

ਜਦੋਂ ਤੁਸੀਂ ਆਟੋ ਮਾਰਜਿਨ ਨਾਲ ਫਲੈਕਸ ਅਲਾਈਨਮੈਂਟਾਂ ਨੂੰ ਮਿਲਾਉਂਦੇ ਹੋ ਤਾਂ ਫਲੈਕਸਬਾਕਸ ਕੁਝ ਸ਼ਾਨਦਾਰ ਚੀਜ਼ਾਂ ਕਰ ਸਕਦਾ ਹੈ। ਹੇਠਾਂ ਆਟੋ ਮਾਰਜਿਨਾਂ ਰਾਹੀਂ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦੀਆਂ ਤਿੰਨ ਉਦਾਹਰਣਾਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ: ਡਿਫੌਲਟ (ਕੋਈ ਆਟੋ ਮਾਰਜਿਨ ਨਹੀਂ), ਦੋ ਆਈਟਮਾਂ ਨੂੰ ਸੱਜੇ ਪਾਸੇ .mr-autoਧੱਕਣਾ ( ), ਅਤੇ ਦੋ ਆਈਟਮਾਂ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਧੱਕਣਾ ( .ml-auto)।

ਬਦਕਿਸਮਤੀ ਨਾਲ, IE10 ਅਤੇ IE11 ਫਲੈਕਸ ਆਈਟਮਾਂ 'ਤੇ ਆਟੋ ਮਾਰਜਿਨਾਂ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਦੇ ਮਾਤਾ-ਪਿਤਾ ਕੋਲ ਗੈਰ-ਡਿਫੌਲਟ justify-contentਮੁੱਲ ਹੈ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ ਇਹ ਸਟੈਕਓਵਰਫਲੋ ਜਵਾਬ ਦੇਖੋ ।

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

ਅਲਾਈਨ-ਆਈਟਮਾਂ ਨਾਲ

align-itemsਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ , flex-direction: column, ਅਤੇ margin-top: autoਜਾਂ ਨੂੰ ਮਿਲਾ ਕੇ ਇੱਕ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਵੱਲ ਲੈ ਜਾਓ margin-bottom: auto।

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

ਲਪੇਟ

ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿੱਚ ਲਪੇਟਣ ਦਾ ਤਰੀਕਾ ਬਦਲੋ। .flex-nowrapਨਾਲ , ਨਾਲ ਲਪੇਟਣ .flex-wrap, ਜਾਂ ਨਾਲ ਰਿਵਰਸ ਰੈਪਿੰਗ (ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ) ਤੋਂ ਬਿਨਾਂ ਰੈਪਿੰਗ ਤੋਂ ਚੁਣੋ .flex-wrap-reverse।

ਫਲੈਕਸ ਆਈਟਮ

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

ਫਲੈਕਸ ਆਈਟਮ

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

ਫਲੈਕਸ ਆਈਟਮ

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

ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ flex-wrap।

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse

ਆਰਡਰ

ਮੁੱਠੀ ਭਰ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਖਾਸ ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੇ ਵਿਜ਼ੂਅਲ ਆਰਡਰ ਨੂੰ ਬਦਲੋ । orderਅਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਆਈਟਮ ਨੂੰ ਪਹਿਲਾਂ ਜਾਂ ਆਖਰੀ ਬਣਾਉਣ ਲਈ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ, ਨਾਲ ਹੀ DOM ਆਰਡਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇੱਕ ਰੀਸੈਟ ਵੀ ਕਰਦੇ ਹਾਂ। ਜਿਵੇਂ orderਕਿ ਕੋਈ ਵੀ ਪੂਰਨ ਅੰਕ ਮੁੱਲ (ਉਦਾਹਰਨ ਲਈ, 5) ਲੈਂਦਾ ਹੈ, ਲੋੜੀਂਦੇ ਵਾਧੂ ਮੁੱਲਾਂ ਲਈ ਕਸਟਮ CSS ਸ਼ਾਮਲ ਕਰੋ।

ਪਹਿਲੀ ਫਲੈਕਸ ਆਈਟਮ

ਦੂਜੀ ਫਲੈਕਸ ਆਈਟਮ

ਤੀਜੀ ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ order।

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

ਸਮੱਗਰੀ ਨੂੰ ਇਕਸਾਰ ਕਰੋ

ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਕਰਾਸ ਧੁਰੇ 'ਤੇ ਇਕੱਠੇalign-content ਇਕਸਾਰ ਕਰਨ ਲਈ ਫਲੈਕਸਬਾਕਸ ਕੰਟੇਨਰਾਂ 'ਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ । (ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ), , , , , ਜਾਂ ਵਿੱਚੋਂ ਚੁਣੋ । ਇਹਨਾਂ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ, ਅਸੀਂ ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਲਾਗੂ ਕੀਤਾ ਅਤੇ ਵਧਾਇਆ ਹੈ।startendcenterbetweenaroundstretchflex-wrap: wrap

ਸਿਰ! ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੀਆਂ ਸਿੰਗਲ ਕਤਾਰਾਂ 'ਤੇ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੈ।

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex align-content-end flex-wrap">...</div>

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex align-content-center flex-wrap">...</div>

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex align-content-between flex-wrap">...</div>

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex align-content-around flex-wrap">...</div>

ਫਲੈਕਸ ਆਈਟਮ

<div class="d-flex align-content-stretch flex-wrap">...</div>

ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ align-content।

.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch