CSS ফ্লেক্স-ডাইরেকশন এট্রিবিউট

  • পূর্ববর্তী পৃষ্ঠা flex-basis
  • পরবর্তী পৃষ্ঠা flex-flow

সংজ্ঞা ও ব্যবহার

flex-direction প্রতিশব্দ এলাস্টিক প্রকল্পগুলির দিশা নির্দেশ করে।

মন্তব্য:যদি এলিমেন্ট এলাস্টিক প্রকল্প নয়, তবে flex প্রতিশব্দ নিষ্ক্রিয়।

আরও দেখুন:

CSS শিক্ষাদীপিকা:CSS এলাস্টিক ফ্লেক্স

CSS পরিচ্ছেদflex বৈশিষ্ট্য

CSS পরিচ্ছেদflex-basis বৈশিষ্ট্য

CSS পরিচ্ছেদflex-flow বৈশিষ্ট্য

CSS পরিচ্ছেদflex-grow বৈশিষ্ট্য

CSS পরিচ্ছেদflex-shrink বৈশিষ্ট্য

CSS পরিচ্ছেদflex-wrap বৈশিষ্ট্য

HTML DOM পরিচ্ছেদflexDirection বৈশিষ্ট্য

প্রদর্শন

ডিভ ইলেকট্রনের ভিতরের এলাস্টিক আইটেমগুলির পক্ষকে বিপরীত দিকে সজ্জিত করুন:

div {
  display: flex;
  flex-direction: row-reverse; 
}

আপনার নিজেই প্রয়োগ করুন

CSS সংজ্ঞা

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

বৈশিষ্ট্য মান

মান বর্ণনা
row ডিফল্ট মান
row-reverse সমান সারি, কিন্তু পক্ষ পরিবর্তন করা হয়েছে।
column সারি হিসাবে, এলাস্টিক আইটেমগুলিকে উপর দিকে দেখানো হয়েছে।
column-reverse সমান সারি, কিন্তু পক্ষ পরিবর্তন করা হয়েছে।
initial এই বৈশিষ্ট্যটি তার ডিফল্ট মানে ন্যায় করুন। দেখুন: initial。
inherit এই বৈশিষ্ট্যটি পিতৃ ইলেকট্রনের থেকে উত্তরসূরী করুন। দেখুন: inherit。

টেকনিক্যাল বিবরণ

ডিফল্ট মান: row
উত্তরসূরী: না
অ্যানিমেশন নির্মাণ: সমর্থিত নয়। দেখুন:অ্যানিমেশন সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: CSS3
JavaScript সংজ্ঞা: object.style.flexDirection="column-reverse"

আরও প্রদর্শন

flex-direction এবং মিডিয়া কোয়াইয়ার এর সাথে বিভিন্ন স্ক্রিন মাপ/ডিভাইসের জন্য ভিন্ন লেআউট তৈরি করতে মিলিত ব্যবহার করুন:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* প্রতিক্রিয় সাজানো - দুই সারির ব্যবহারের বদলে একটি সারি (100％) তৈরি করুন */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

আপনার নিজেই প্রয়োগ করুন

ব্রাউজার সমর্থন

টেবিলের নম্বরগুলি এই বৈশিষ্ট্যটির পূর্ণাঙ্গ সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি নির্দেশ করে।

প্রিফিক্স হিসাবে -webkit- এবং -moz- এর সাথে নম্বরগুলি প্রথম সংস্করণটির ব্যবহার করা হয়।

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • পূর্ববর্তী পৃষ্ঠা flex-basis
  • পরবর্তী পৃষ্ঠা flex-flow