ফ্লেক্সবক্স প্লেগ্রাউন্ড

কন্টেইনার আর আইটেমের প্রতিটি প্রপার্টি, লাইভ — কিছু টানতে হবে না, শুধু নব ঘোরান আর দেখুন আসল flexbox কাজ করছে। দেখুন কীভাবে order আসল HTML স্পর্শ না করেই আপনি যা দেখছেন তা বদলে দেয়।

CSS পাঠগুলো দেখুন

এখনও নির্দিষ্ট কোনো flexbox পাঠ নেই — নিচের ব্যাখ্যা প্যানেলের মাধ্যমে এই প্লেগ্রাউন্ডই ধারণাটি শেখায়।

কন্টেইনার

flex-direction

flex-wrap

justify-content

align-items

align-content

gap12px

আইটেমসমূহ (3)

সংখ্যাগুলো স্থির HTML/DOM ক্রম — এগুলো কখনো নড়ে না। শুধু দৃশ্যমান অবস্থান বদলায়।

আইটেম 1

flex-grow1

flex-shrink1

flex-basis

order0

align-self

কন্টেইনারের মাপ

প্রস্থ560pxউচ্চতা260px

প্রিসেট

তৈরি হওয়া CSS

.container {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.item:nth-child(1) {
  flex-grow: 1;
}

.item:nth-child(2) {
  flex-grow: 1;
}

.item:nth-child(3) {
  flex-grow: 1;
}