নমনীয়
প্ৰতিক্ৰিয়াশীল flexbox সঁজুলিসমূহৰ এটা সম্পূৰ্ণ চুইটৰ সৈতে গ্ৰীড স্তম্ভসমূহ, নেভিগেচন, উপাদানসমূহ, আৰু অধিক বিন্যাস, প্ৰান্তিককৰণ, আৰু আকাৰ দ্ৰুতভাৱে ব্যৱস্থাপনা কৰক। অধিক জটিল প্ৰণয়নৰ বাবে, স্বনিৰ্বাচিত 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.d-xxl-flex.d-xxl-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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
বিষয়বস্তুৰ ন্যায্যতা প্ৰদান কৰক
মূল অক্ষত ফ্লেক্স বস্তুসমূহৰ প্ৰান্তিককৰণ সলনি কৰিবলে flexbox ধাৰকসমূহত সঁজুলিসমূহ ব্যৱহাৰ কৰক justify-content(আৰম্ভ কৰিবলে x-অক্ষ, y-অক্ষ যদি flex-direction: column). start(ব্ৰাউজাৰ অবিকল্পিত), end, center, between, around, বা ৰ পৰা নিৰ্ব্বাচন কৰক evenly।
<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>
<div class="d-flex justify-content-evenly">...</div>
ৰ বাবেও প্ৰতিক্ৰিয়াশীল তাৰতম্য আছে justify-content।
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
বস্তুসমূহ প্ৰান্তিককৰণ কৰক
ক্ৰছ অক্ষত ফ্লেক্স বস্তুসমূহৰ প্ৰান্তিককৰণ সলনি কৰিবলে 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.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-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-xxl-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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
অটো মাৰ্জিন
আপুনি অটো মাৰ্জিনৰ সৈতে ফ্লেক্স এলাইনমেণ্ট মিহলাই দিলে ফ্লেক্সবক্সে কিছুমান যথেষ্ট ভয়ংকৰ কাম কৰিব পাৰে। তলত স্বয়ংক্ৰিয় মাৰ্জিনৰ যোগেদি ফ্লেক্স বস্তু নিয়ন্ত্ৰণ কৰাৰ তিনিটা উদাহৰণ দেখুওৱা হৈছে: অবিকল্পিত (কোনো স্বয়ংক্ৰিয় মাৰ্জিন নাই), দুটা বস্তু সোঁফালে ঠেলি দিয়া ( .me-auto), আৰু দুটা বস্তু বাওঁফালে ঠেলি দিয়া ( .ms-auto).
<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="me-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="ms-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.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
ক্ৰম
মুষ্টিমেয় উপযোগীতাৰ সৈতে নিৰ্দিষ্ট ফ্লেক্স বস্তুসমূহৰ দৃশ্যমান ক্ৰম সলনি কৰক । orderআমি কেৱল এটা বস্তু প্ৰথম বা শেষত বনোৱাৰ বিকল্প প্ৰদান কৰোঁ, লগতে DOM অৰ্ডাৰ ব্যৱহাৰ কৰিবলৈ এটা ৰিছেট প্ৰদান কৰোঁ। যিহেতু order0 ৰ পৰা 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-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
অতিৰিক্তভাৱে ৰেচপন্সিভও আছে.order-first আৰু শ্ৰেণীও আছে যিয়ে ক্ৰমে আৰু প্ৰয়োগ কৰি এটা উপাদানৰ .order-lastপৰিৱৰ্তন কৰে ।orderorder: -1order: 6
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
বিষয়বস্তু প্ৰান্তিককৰণ কৰক
ক্ৰছ অক্ষত ফ্লেক্স বস্তুসমূহক একেলগে প্ৰান্তিককৰণ কৰিবলে 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-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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
মিডিয়া বস্তু
Bootstrap 4 ৰ পৰা মাধ্যম বস্তু উপাদান প্ৰতিলিপি কৰিব বিচাৰিছেনে ? কেইটামান ফ্লেক্স সঁজুলিৰ সৈতে ইয়াক অতি কম সময়ৰ ভিতৰতে পুনৰ সৃষ্টি কৰক যিয়ে আগৰ তুলনাত আৰু অধিক নমনীয়তা আৰু স্বনিৰ্বাচনৰ অনুমতি দিয়ে।
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>আৰু কওক আপুনি ছবিখনৰ কাষত বিষয়বস্তুটো উলম্বভাৱে কেন্দ্ৰীভূত কৰিব বিচাৰে:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>ছাছ
ইউটিলিটিজ এপিআই
Flexbox সঁজুলিসমূহ আমাৰ সঁজুলিসমূহ API ত ঘোষণা কৰা হৈছে scss/_utilities.scss. সঁজুলি API কেনেকৈ ব্যৱহাৰ কৰিব লাগে শিকিব।
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),