এই টুল ব্যবহার করে ফ্লেক্সবক্স দিয়ে কীভাবে একটি div কেন্দ্রীভূত করব?

নিখুঁতভাবে কেন্দ্রীভূত প্রিসেটটি বেছে নিন, যা কন্টেইনারে justify-content: center এবং align-items: center সেট করে। তারপর CSS কপি করুন টিপুন এবং আপনার স্টাইলশীটে পেস্ট করুন।

আমি কোন ফ্লেক্সবক্স প্রপার্টি পরিবর্তন করতে পারি?

আপনি flex-direction, flex-wrap, justify-content, align-items, align-content এবং Gap সেট করতে পারেন। আপনি আইটেম-এর সংখ্যা 1 থেকে 10 এবং পূর্বরূপ উচ্চতা-ও পরিবর্তন করতে পারেন।

কীভাবে একটি আইটেমে flex-grow কীভাবে কাজ করে তা দেখব?

এটিতে flex-grow: 1 টগল করতে লাইভ প্রিভিউতে একটি আইটেমে ক্লিক করুন এবং এটি সরাতে আবার ক্লিক করুন। জেনারেট করা CSS তখন সেই আইটেমের জন্য একটি .item:nth-child নিয়ম অন্তর্ভুক্ত করে।

নেভিগেশন বার বা কার্ড সারির মতো কোনো প্রারম্ভিক প্রিসেট আছে কি?

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

কেন align-content প্রিভিউতে কিছুই করছে না বলে মনে হচ্ছে?

align-content তখনই কার্যকর হয় যখন আইটেমগুলো একাধিক লাইনে মোড়ানো হয়। প্রিভিউতে এটি শুধুমাত্র তখনই প্রয়োগ করা হয় যখন wrap, nowrap না হয়, তাই প্রথমে flex-wrap-কে wrap-এ সেট করুন।

এটি কি সত্যিই বিনামূল্যে?

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

এটি মোবাইলে কাজ করে?

হ্যাঁ। কিছু ইনস্টল না করেই iOS ও Android-এর আধুনিক মোবাইল ব্রাউজারে চলে।

↔️

বিনামূল্যে CSS ফ্লেক্সবক্স জেনারেটর

লাইভ আইটেমে ফ্লেক্স দিকনির্দেশনা, মোড়ানো, ন্যায্যতা এবং সারিবদ্ধতা নিয়ে পরীক্ষা করুন — এবং CSS কপি করুন।

ব্রাউজারেই চলেসাইন-আপ নেই, পপ-আপ নেইলগইনের প্রয়োজন নেইচিরকালের জন্য বিনামূল্যে

একবার লোড হলে অফলাইনেও কাজ করে

একটি ভিজ্যুয়াল ফ্লেক্সবক্স প্লেগ্রাউন্ড: দিকনির্দেশনা সেট করুন, মোড়ানো, justify-content, align-items এবং গ্যাপ, আইটেম সংখ্যা পরিবর্তন করুন, এবং প্রিভিউতে একটি আইটেমে ক্লিক করে flex-grow দিন। CSS লাইভ আপডেট হয়, কপি করার জন্য প্রস্তুত।

প্রিসেট

flex-direction

flex-wrap

justify-content

align-items

গ্যাপ: 12pxআইটেম: 4পূর্বরূপ উচ্চতা: 176px

টিপ: প্রিভিউতে একটি আইটেমে ক্লিক করে এটিতে flex-grow: 1 টগল করুন।

লাইভ প্রিভিউ

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 সবকিছু আপনার ব্রাউজারে চলে — কিছুই আপলোড করা হয় না।

কিভাবে কাজ করে

একটি ইন্টারঅ্যাক্টিভ flexbox খেলার মাঠ: flex-direction, wrap, justify-content ও align-items বদলান এবং সর্বোচ্চ 10টি লাইভ আইটেম সঙ্গে সঙ্গে নতুন করে সাজতে দেখুন। কোনো আইটেমে ক্লিক করে flex-grow: 1 দিন এবং সেটি কীভাবে জায়গা নেয় দেখুন। CSS লাইভ আপডেট হয়, আপনার প্রজেক্টে কপির জন্য প্রস্তুত।

1
কনটেইনার সেট করুন
দিক, wrap, justify-content, align-items, gap।
2
আইটেম যোগ করুন
এক থেকে দশটি নম্বরযুক্ত flex আইটেম।
3
পরীক্ষা করুন
flex-grow টগল করতে একটি আইটেমে ক্লিক করে প্রভাব দেখুন।
4
CSS কপি করুন
কনটেইনার (ও আইটেম)-এর নিয়ম, পেস্টের জন্য প্রস্তুত।

সবকিছু আপনার ব্রাউজারে চলে — কিছুই আপলোড হয় না।

বিনামূল্যে CSS ফ্লেক্সবক্স জেনারেটর

কিভাবে কাজ করে

সম্পর্কিত টুলস

CSS গ্রিড জেনারেটর

CSS গ্র্যাডিয়েন্ট জেনারেটর

CSS বক্স শ্যাডো জেনারেটর

সচরাচর জিজ্ঞাসিত প্রশ্নাবলী