স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
in English

ফ্লেক্স

প্রতিক্রিয়াশীল ফ্লেক্সবক্স ইউটিলিটিগুলির সম্পূর্ণ স্যুটের সাথে গ্রিড কলাম, নেভিগেশন, উপাদান এবং আরও অনেক কিছুর বিন্যাস, প্রান্তিককরণ এবং আকার দ্রুত পরিচালনা করুন। আরো জটিল বাস্তবায়নের জন্য, কাস্টম CSS প্রয়োজন হতে পারে।

ফ্লেক্স আচরণ সক্ষম করুন

displayএকটি ফ্লেক্সবক্স কন্টেইনার তৈরি করতে ইউটিলিটিগুলি প্রয়োগ করুন এবং সরাসরি শিশুদের উপাদানগুলিকে ফ্লেক্স আইটেমে রূপান্তর করুন। ফ্লেক্স পাত্রে এবং আইটেমগুলি অতিরিক্ত ফ্লেক্স বৈশিষ্ট্য সহ আরও সংশোধন করা যেতে পারে।

আমি একটি flexbox ধারক!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
আমি একটি ইনলাইন flexbox ধারক!
<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বিপরীত দিক থেকে অনুভূমিক দিক শুরু করতে ব্যবহার করুন।

ফ্লেক্স আইটেম 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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

বিষয়বস্তু ন্যায্যতা

প্রধান অক্ষে ফ্লেক্স আইটেমগুলির প্রান্তিককরণ পরিবর্তন করতে ফ্লেক্সবক্স পাত্রে ইউটিলিটিগুলি ব্যবহার 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

আইটেম সারিবদ্ধ

ক্রস অক্ষে ফ্লেক্স আইটেমগুলির প্রান্তিককরণ পরিবর্তন করতে ফ্লেক্সবক্স পাত্রে ইউটিলিটিগুলি ব্যবহার 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

নিজেকে সারিবদ্ধ করুন

ফ্লেক্সবক্স 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

মিডিয়া অবজেক্ট

বুটস্ট্র্যাপ 4 থেকে মিডিয়া অবজেক্ট উপাদান প্রতিলিপি খুঁজছেন ? কিছু ফ্লেক্স ইউটিলিটিগুলির সাথে এটিকে কিছুক্ষণের মধ্যেই পুনরায় তৈরি করুন যা আগের থেকে আরও বেশি নমনীয়তা এবং কাস্টমাইজেশনের অনুমতি দেয়৷

Placeholder Image
এটি একটি মিডিয়া উপাদান থেকে কিছু বিষয়বস্তু। আপনি এটিকে যেকোনো বিষয়বস্তুর সাথে প্রতিস্থাপন করতে পারেন এবং প্রয়োজন অনুযায়ী এটি সামঞ্জস্য করতে পারেন।
<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>

এবং বলুন আপনি ছবির পাশের বিষয়বস্তুটিকে উল্লম্বভাবে কেন্দ্রে রাখতে চান:

Placeholder Image
এটি একটি মিডিয়া উপাদান থেকে কিছু বিষয়বস্তু। আপনি এটিকে যেকোনো বিষয়বস্তুর সাথে প্রতিস্থাপন করতে পারেন এবং প্রয়োজন অনুযায়ী এটি সামঞ্জস্য করতে পারেন।
<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>

সস

ইউটিলিটি API

ফ্লেক্সবক্স ইউটিলিটিগুলি আমাদের ইউটিলিটি 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,
      ),
    ),