CSSBeginner

CSS Flexbox

Flex container, flex-direction, justify-content, align-items, gap দিয়ে এক-মাত্রিক লেআউট — বাংলা গাইড।

11টি অংশবাংলা ভাষায়

Flexbox হলো এক-মাত্রিক লেআউট ব্যবস্থা — সারি (row) বা স্তম্ভ (column) — দিয়ে element সাজানোর আধুনিক ও সহজ পদ্ধতি।

Flex container

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grow  { flex: 1; }        /* বাড়তি জায়গা নাও */
.center { flex: 0 0 auto; }  /* নিজের সাইজে থাকবে */

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 240px;
}

এক-মাত্রিক লেআউটে flexbox

যখন শুধু এক দিকে সাজাতে হয় (ডান-বাম বা উপরে-নিচে) — flexbox সবচেয়ে সহজ। দুই দিক একসাথে দরকার হলে next অধ্যায়ের grid ব্যবহার করুন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।

Flex container

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

flex-direction — row / column

justify-content — মূল অক্ষে বিন্যাস

align-items — বিপরীত অক্ষে বিন্যাস

gap — সদস্যদের মাঝের ফাঁক

সাধারণ প্যাটার্ন: কার্ডস

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 240px;
}

এক-মাত্রিক লেআউটে flexbox

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।