ਫਲੈਕਸ
ਜਵਾਬਦੇਹ ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਪੂਰੇ ਸੂਟ ਨਾਲ ਗਰਿੱਡ ਕਾਲਮਾਂ, ਨੈਵੀਗੇਸ਼ਨ, ਕੰਪੋਨੈਂਟਸ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਖਾਕੇ, ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਆਕਾਰ ਦਾ ਤੁਰੰਤ ਪ੍ਰਬੰਧਨ ਕਰੋ। ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਅਮਲਾਂ ਲਈ, ਕਸਟਮ CSS ਜ਼ਰੂਰੀ ਹੋ ਸਕਦਾ ਹੈ।
display
ਇੱਕ ਫਲੈਕਸਬਾਕਸ ਕੰਟੇਨਰ ਬਣਾਉਣ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ ਅਤੇ ਸਿੱਧੇ ਬੱਚਿਆਂ ਦੇ ਤੱਤ ਨੂੰ ਫਲੈਕਸ ਆਈਟਮਾਂ ਵਿੱਚ ਬਦਲੋ। ਫਲੈਕਸ ਕੰਟੇਨਰਾਂ ਅਤੇ ਆਈਟਮਾਂ ਨੂੰ ਵਾਧੂ ਫਲੈਕਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਅੱਗੇ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ।
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">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
ਪਾਸੇ ਤੋਂ ਹਰੀਜੱਟਲ ਦਿਸ਼ਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਵਰਤੋਂ।
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
.flex-column
ਲੰਬਕਾਰੀ ਦਿਸ਼ਾ ਸੈੱਟ ਕਰਨ ਲਈ, ਜਾਂ .flex-column-reverse
ਉਲਟ ਪਾਸੇ ਤੋਂ ਲੰਬਕਾਰੀ ਦਿਸ਼ਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਵਰਤੋਂ ।
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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
ਜਦੋਂ ਤੁਸੀਂ ਆਟੋ ਮਾਰਜਿਨ ਨਾਲ ਫਲੈਕਸ ਅਲਾਈਨਮੈਂਟਾਂ ਨੂੰ ਮਿਲਾਉਂਦੇ ਹੋ ਤਾਂ ਫਲੈਕਸਬਾਕਸ ਕੁਝ ਸ਼ਾਨਦਾਰ ਚੀਜ਼ਾਂ ਕਰ ਸਕਦਾ ਹੈ। ਹੇਠਾਂ ਆਟੋ ਮਾਰਜਿਨਾਂ ਰਾਹੀਂ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦੀਆਂ ਤਿੰਨ ਉਦਾਹਰਣਾਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ: ਡਿਫੌਲਟ (ਕੋਈ ਆਟੋ ਮਾਰਜਿਨ ਨਹੀਂ), ਦੋ ਆਈਟਮਾਂ ਨੂੰ ਸੱਜੇ ਪਾਸੇ .mr-auto
ਧੱਕਣਾ ( ), ਅਤੇ ਦੋ ਆਈਟਮਾਂ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਧੱਕਣਾ ( .ml-auto
)।
ਬਦਕਿਸਮਤੀ ਨਾਲ, IE10 ਅਤੇ IE11 ਫਲੈਕਸ ਆਈਟਮਾਂ 'ਤੇ ਆਟੋ ਮਾਰਜਿਨਾਂ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਦੇ ਮਾਤਾ-ਪਿਤਾ ਕੋਲ ਗੈਰ-ਡਿਫੌਲਟ justify-content
ਮੁੱਲ ਹੈ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ ਇਹ ਸਟੈਕਓਵਰਫਲੋ ਜਵਾਬ ਦੇਖੋ ।
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
align-items
ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ , flex-direction: column
, ਅਤੇ margin-top: auto
ਜਾਂ ਨੂੰ ਮਿਲਾ ਕੇ ਇੱਕ ਫਲੈਕਸ ਆਈਟਮ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਵੱਲ ਲੈ ਜਾਓ margin-bottom: auto
।
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">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">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">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
ਇਕਸਾਰ ਕਰਨ ਲਈ ਫਲੈਕਸਬਾਕਸ ਕੰਟੇਨਰਾਂ 'ਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ । (ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ), , , , , ਜਾਂ ਵਿੱਚੋਂ ਚੁਣੋ । ਇਹਨਾਂ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ, ਅਸੀਂ ਫਲੈਕਸ ਆਈਟਮਾਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਲਾਗੂ ਕੀਤਾ ਅਤੇ ਵਧਾਇਆ ਹੈ।start
end
center
between
around
stretch
flex-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-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch