ফ্লেক্সবক্স

FlexBox হল এমন একটি কন্টেইনার যা আইটেমগুলিকে এক দিকে সাজিয়ে রাখে। এটি উপলব্ধ স্থানটি সর্বোত্তমভাবে পূরণ করার জন্য আইটেমগুলির আকার পরিবর্তন, মোড়ানো, সারিবদ্ধকরণ এবং স্থান বিতরণ করতে পারে। এটি বিভিন্ন আকারের আইটেমগুলির জন্য এবং উপলব্ধ স্থান পরিবর্তন হলে আইটেমগুলির আকার পরিবর্তন করার জন্য একটি কার্যকর লেআউট।

FlexBox দিয়ে আপনি যা করতে পারেন:

  • উপলব্ধ স্থান পূরণের জন্য আইটেমগুলি কীভাবে বৃদ্ধি পায় এবং সঙ্কুচিত হয় তা নিয়ন্ত্রণ করুন
  • পর্যাপ্ত জায়গা না থাকলে নতুন সারি বা কলামে আইটেমগুলি মুড়ে দিন।
  • সুবিধাজনক প্রিসেট ব্যবহার করে আইটেমগুলির মধ্যে অতিরিক্ত স্থান বিতরণ করুন

ফ্লেক্সবক্স কখন ব্যবহার করবেন

FlexBox সাধারণত একটি সামগ্রিক স্ক্রিন লেআউটের মধ্যে অল্প সংখ্যক আইটেম প্রদর্শনের জন্য ব্যবহৃত হয়। সামগ্রিক স্ক্রিন লেআউটের জন্য, Grid সাধারণত একটি ভালো পছন্দ। FlexBox আইটেমের lazy-loading সমর্থন করে না। প্রচুর সংখ্যক আইটেম প্রদর্শনের জন্য, lazy lists এবং grids ব্যবহার করুন। যদি আপনার আইটেম মোড়ানোর প্রয়োজন হয়, তাহলে FlowRow এবং FlowColumn এর পরিবর্তে FlexBox ব্যবহার করুন।

পরিভাষা এবং ধারণা

FlexBox তার আইটেমগুলিকে অনুভূমিক বা উল্লম্ব রেখায় স্থাপন করে। এই রেখাগুলির এই দিকটি প্রধান অক্ষকে প্রতিষ্ঠিত করে। প্রধান অক্ষ থেকে 90 ডিগ্রি হল ক্রস অক্ষ । প্রধান অক্ষ বরাবর FlexBox দৈর্ঘ্যকে প্রধান আকার বলা হয়। সংশ্লিষ্ট ক্রস অক্ষের দৈর্ঘ্যকে ক্রস আকার বলা হয়। এই আকার এবং অক্ষগুলি FlexBox আচরণের ভিত্তি তৈরি করে।

অনুভূমিক প্রধান অক্ষ এবং উল্লম্ব ক্রস অক্ষ সহ ফ্লেক্সবক্স।
চিত্র ১. FlexBox দিক Row হলে অক্ষ এবং আকার।
উল্লম্ব প্রধান অক্ষ এবং অনুভূমিক ক্রস অক্ষ সহ ফ্লেক্সবক্স।
চিত্র ২. FlexBox দিক Column হলে অক্ষ এবং আকার।

বৈশিষ্ট্য প্রয়োগ করুন

আপনি দুটি উপায়ে FlexBox বৈশিষ্ট্য প্রয়োগ করতে পারেন:

  • FlexBox(config) ব্যবহার করে FlexBox কন্টেইনারে
  • Modifier.flex ব্যবহার করে FlexBox ভিতরের একটি আইটেমে

কন্টেইনার বৈশিষ্ট্য ( config )

আইটেমের বৈশিষ্ট্য ( Modifier.flex )

  • direction - আইটেম লেআউটের দিকনির্দেশনা
  • wrap - মূল আকার অপর্যাপ্ত হলে জিনিসপত্র মোড়ানো হবে কিনা
  • justifyContent - মূল অক্ষ বরাবর আইটেমগুলি কীভাবে বিতরণ করা যায়
  • alignItems - ক্রস অক্ষ বরাবর আইটেমগুলিকে কীভাবে সারিবদ্ধ করতে হয়
  • alignContent - একাধিক লাইন থাকলে ক্রস সাইজ থেকে অতিরিক্ত স্থান কীভাবে বিতরণ করা যায়
  • rowGap / columnGap - আইটেম এবং লাইনের মধ্যে স্থান যোগ করে

এই বৈশিষ্ট্যগুলি সম্পর্কে আরও তথ্যের জন্য সেট কন্টেইনার আচরণ দেখুন।

  • basis - মূল আকার থেকে অতিরিক্ত স্থান বিতরণের আগে আইটেমের আকার
  • grow - এই আইটেমটি যে মূল আকার পাবে তার থেকে অতিরিক্ত স্থানের অংশ
  • shrink - এই আইটেমটি যে মূল আকার পাবে তার থেকে স্থান ঘাটতির অংশ
  • alignSelf - ক্রস সাইজ থেকে এই আইটেমটিতে অতিরিক্ত স্থান কীভাবে বিতরণ করা যায়, alignItems কে ওভাররাইড করে
  • order - লেআউট অর্ডার নিয়ন্ত্রণ করে

এই বৈশিষ্ট্যগুলি সম্পর্কে আরও তথ্যের জন্য আইটেম আচরণ সেট করুন দেখুন।

FlexBox লেআউট অ্যালগরিদম বুঝুন

FlexBox সবচেয়ে শক্তিশালী বৈশিষ্ট্যগুলির মধ্যে একটি হল এর বাচ্চাদের আকার পরিবর্তন করার ক্ষমতা যা এর জন্য উপলব্ধ স্থানের সাথে সবচেয়ে উপযুক্ত। FlexBox কীভাবে এটি করে তা বোঝা আপনাকে সমস্ত সম্ভাব্য আকারের জন্য আপনার UI অপ্টিমাইজ করার জন্য FlexBox বৈশিষ্ট্য সেট করতে সহায়তা করতে পারে।

FlexBox এর লেআউট অ্যালগরিদম নিম্নলিখিত উপায়ে কাজ করে:

  1. চাইল্ড বেস সাইজ গণনা করুন : অতিরিক্ত স্থান বিতরণের আগে মূল অক্ষ বরাবর চাইল্ডের basis মান ব্যবহার করে এর প্রাথমিক আকার গণনা করুন।

  2. বাচ্চাদের সাজান : যদি থাকে, তাহলে তাদের order মান অনুসারে সাজান।

  3. লাইন তৈরি করুন : প্রতিটি সন্তানের জন্য, পরীক্ষা করুন যে এর প্রাথমিক আকার এবং gap বর্তমান লাইনের অবশিষ্ট স্থানের সাথে খাপ খায় কিনা। যদি তাই হয়, তাহলে এই চাইল্ডটিকে লাইনের মধ্যে রাখুন। যদি না হয়, তাহলে মোড়ানো সক্ষম থাকলে এটি একটি নতুন লাইনে রাখুন, অথবা আইটেমটিকে বর্তমান লাইনের মধ্যে রাখুন যেখানে এটি উপচে পড়বে (কন্টেইনারের প্রান্ত দ্বারা এটি আংশিকভাবে অস্পষ্ট থাকবে)।

  4. প্রধান অক্ষে আইটেমগুলিকে সারিবদ্ধ করুন বা আকার পরিবর্তন করুন : প্রতিটি লাইনের জন্য, আইটেমগুলিকে আকার পরিবর্তন বা সারিবদ্ধ করে অতিরিক্ত স্থান বিতরণ করুন।

  5. ক্রস অক্ষে আইটেমগুলিকে সারিবদ্ধ করুন বা আকার পরিবর্তন করুন : প্রতিটি লাইনের জন্য, আইটেম এবং লাইনগুলিকে প্রসারিত বা সারিবদ্ধ করে বা তাদের মধ্যে অতিরিক্ত স্থান বিতরণ করুন।

এখন যেহেতু আপনি FlexBox ধারণার সাথে পরিচিত, একটি মৌলিক FlexBox তৈরি করতে শুরু করুন দেখুন।

পূর্ববর্তী
অভিযোজিত করবেন এবং করবেন না
পরবর্তী
শুরু করুন