Source

নমনীয়

প্ৰতিক্ৰিয়াশীল 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

দিশ

দিশ সঁজুলিসমূহৰ সৈতে এটা ফ্লেক্স পাত্ৰত ফ্লেক্স বস্তুসমূহৰ দিশ নিৰ্ধাৰণ কৰক। বেছিভাগ ক্ষেত্ৰতে আপুনি ইয়াত অনুভূমিক শ্ৰেণী বাদ দিব পাৰে কাৰণ ব্ৰাউজাৰ অবিকল্পিত হৈছে row। কিন্তু, আপুনি এনে পৰিস্থিতিৰ সন্মুখীন হ'ব পাৰে য'ত আপুনি এই মান স্পষ্টভাৱে সংহতি কৰিব লাগিছিল (যেনে প্ৰতিক্ৰিয়াশীল পৰিকল্পনাসমূহ)।

.flex-rowএটা অনুভূমিক দিশ নিৰ্ধাৰণ কৰিবলে (ব্ৰাউজাৰ অবিকল্পিত), বা .flex-row-reverseবিপৰীত ফালৰ পৰা অনুভূমিক দিশ আৰম্ভ কৰিবলে ব্যৱহাৰ কৰক।

ফ্লেক্স আইটেম 1

ফ্লেক্স আইটেম ২

ফ্লেক্স আইটেম 3

ফ্লেক্স আইটেম 1

ফ্লেক্স আইটেম ২

ফ্লেক্স আইটেম 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

ফ্লেক্স আইটেম ২

ফ্লেক্স আইটেম 3

ফ্লেক্স আইটেম 1

ফ্লেক্স আইটেম ২

ফ্লেক্স আইটেম 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</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মান আছে। অধিক বিৱৰণৰ বাবে এই 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ফ্লেক্সবক্স পাত্ৰসমূহত সঁজুলিসমূহ ব্যৱহাৰ কৰক। (ব্ৰাউজাৰ অবিকল্পিত), , , , , বা ৰ পৰা নিৰ্ব্বাচন কৰক । এই উপযোগীতাসমূহ প্ৰদৰ্শন কৰিবলৈ, আমি ফ্লেক্স বস্তুসমূহৰ সংখ্যা বলবৎ আৰু বৃদ্ধি কৰিছো।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