فلیکس
ریسپانسیو فلیکس باکس یوٹیلیٹیز کے مکمل سوٹ کے ساتھ گرڈ کالمز، نیویگیشن، اجزاء، اور مزید کی ترتیب، سیدھ، اور سائز کا تیزی سے نظم کریں۔ مزید پیچیدہ نفاذ کے لیے، حسب ضرورت CSS ضروری ہو سکتی ہے۔
فلیکس طرز عمل کو فعال کریں۔
display
فلیکس باکس کنٹینر بنانے کے لیے یوٹیلیٹیز کا اطلاق کریں اور بچوں کے براہ راست عناصر کو فلیکس آئٹمز میں تبدیل کریں۔ فلیکس کنٹینرز اور اشیاء اضافی فلیکس خصوصیات کے ساتھ مزید ترمیم کرنے کے قابل ہیں۔
<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
مخالف سمت سے افقی سمت شروع کرنے کے لیے استعمال کریں ۔
<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
مخالف سمت سے عمودی سمت شروع کرنے کے لیے استعمال کریں ۔
<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
مواد کا جواز پیش کریں۔
justify-content
مرکزی محور پر فلیکس آئٹمز کی سیدھ کو تبدیل کرنے کے لیے فلیکس باکس کنٹینرز پر یوٹیلیٹیز استعمال کریں (شروع کرنے کے لیے x-axis، y-axis if 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
اشیاء کو سیدھ کریں۔
کراس ایکسس (شروع کرنے کے لیے y-axis، x-axis if ) align-items
پر فلیکس آئٹمز کی سیدھ کو تبدیل کرنے کے لیے فلیکس باکس کنٹینرز پر یوٹیلیٹیز استعمال کریں ۔ , , , , یا (براؤزر ڈیفالٹ) 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
خود کو سیدھ میں لانا
انفرادی طور پر کراس ایکسس (شروع کرنے کے لیے y-axis، x-axis if ) align-self
پر ان کی صف بندی کو تبدیل کرنے کے لیے flexbox آئٹمز پر یوٹیلیٹیز استعمال کریں ۔ flex-direction: column
انہی اختیارات میں سے انتخاب کریں جیسے align-items
: start
, end
, center
, baseline
, یا stretch
(browser default)۔
<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
آٹو مارجنز
جب آپ فلیکس الائنمنٹس کو آٹو مارجن کے ساتھ ملاتے ہیں تو Flexbox کچھ بہت ہی زبردست چیزیں کر سکتا ہے۔ آٹو مارجن کے ذریعے فلیکس آئٹمز کو کنٹرول کرنے کی تین مثالیں ذیل میں دکھائی گئی ہیں: ڈیفالٹ (کوئی آٹو مارجن نہیں)، دو آئٹمز کو دائیں طرف .mr-auto
دھکیلنا ( )، اور دو آئٹمز کو بائیں طرف دھکیلنا ( .ml-auto
)۔
بدقسمتی سے، IE10 اور IE11 ان فلیکس آئٹمز پر آٹو مارجنز کو درست طریقے سے سپورٹ نہیں کرتے ہیں جن کے پیرنٹ کی غیر ڈیفالٹ justify-content
قدر ہے۔ مزید تفصیلات کے لیے یہ StackOverflow جواب دیکھیں۔
<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
سیدھ میں لانے کے لیے فلیکس باکس کنٹینرز پر یوٹیلیٹیز استعمال کریں ۔ (براؤزر ڈیفالٹ) میں سے انتخاب کریں ، , , , یا . ان افادیت کو ظاہر کرنے کے لیے، ہم نے فلیکس آئٹمز کی تعداد کو نافذ اور بڑھا دیا ہے۔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-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