Justify Content (অক্ষ বরাবর আইটেমের অবস্থান নির্ধারণ)

Justify Content কী?

justify-content হলো Flexbox-এর একটি প্রপার্টি যা অক্ষ বরাবর (অর্থাৎ অনুভূমিক অক্ষ বা উল্লম্ব অক্ষের উপর) Flex Items-এর অবস্থান নির্ধারণ করে। এটি মূলত Flex Container-এর মধ্যে Flex Items-গুলোর মধ্যে স্থান ও বিন্যাসের সমন্বয় করতে ব্যবহৃত হয়।

Flexbox লেআউটে, justify-content প্রপার্টি দিয়ে আপনি আইটেমগুলোর স্থান ও বিন্যাস অনুভূমিক (যদি flex-direction হলো row) বা উল্লম্ব (যদি flex-direction হলো column) অক্ষের উপর নিয়ন্ত্রণ করতে পারেন।

Justify Content-এর মানসমূহ:

1. flex-start (ডিফল্ট মান):

   • Flex Items গুলি কন্টেইনারের শুরুতে (বামে অথবা উপরে) সাজানো হয়।

   .flex-container {
     display: flex;
     justify-content: flex-start; /* আইটেমগুলো কন্টেইনারের শুরুতে থাকবে */
   }
   

2. flex-end:

   • Flex Items গুলি কন্টেইনারের শেষের দিকে (ডানে অথবা নিচে) সাজানো হয়।

   .flex-container {
     display: flex;
     justify-content: flex-end; /* আইটেমগুলো কন্টেইনারের শেষের দিকে থাকবে */
   }
   

3. center:

   • Flex Items গুলি কন্টেইনারের কেন্দ্রে সাজানো হয়।

   .flex-container {
     display: flex;
     justify-content: center; /* আইটেমগুলো কন্টেইনারের কেন্দ্রে থাকবে */
   }
   

4. space-between:

   • Flex Items গুলোর মধ্যে সমানভাবে স্থান প্রদান করা হয়, এবং প্রথম আইটেম কন্টেইনারের শুরুতে এবং শেষ আইটেম কন্টেইনারের শেষের দিকে থাকে।

   .flex-container {
     display: flex;
     justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান স্থান */
   }
   

5. space-around:

   • Flex Items গুলোর মধ্যে সমান জায়গা প্রদান করা হয়, তবে প্রথম এবং শেষ আইটেমের চারপাশে অর্ধেক জায়গা থাকবে।

   .flex-container {
     display: flex;
     justify-content: space-around; /* আইটেমগুলোর চারপাশে সমান জায়গা */
   }
   

6. space-evenly:

   • Flex Items গুলোর মধ্যে সমান দূরত্ব প্রদান করা হয়, অর্থাৎ প্রথম এবং শেষ আইটেমের মধ্যেও সমান স্থান থাকে।

   .flex-container {
     display: flex;
     justify-content: space-evenly; /* আইটেমগুলোর মধ্যে সমান দূরত্ব */
   }
   

উদাহরণ সহ Justify Content এর ব্যবহার

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান দূরত্ব */
  gap: 10px; /* আইটেমগুলোর মধ্যে কিছু ফাঁকা জায়গা */
  background-color: lightgray;
  padding: 10px;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
}

আউটপুট:

• এখানে justify-content: space-between ব্যবহার করা হয়েছে, যার ফলে Flex Items গুলো কন্টেইনারের মধ্যে সমান দূরত্বে সজ্জিত হবে এবং প্রথম এবং শেষ আইটেম কন্টেইনারের শুরু এবং শেষের দিকে থাকবে।

Justify Content এবং Flex Direction

Justify-content প্রপার্টি কিভাবে কাজ করবে তা Flex Container এর flex-direction প্রপার্টির উপর নির্ভর করে:

1. যখন flex-direction: row (ডিফল্ট):
   • justify-content অনুভূমিক অক্ষে কাজ করবে (বাম থেকে ডানে)।
2. যখন flex-direction: column:
   • justify-content উল্লম্ব অক্ষে কাজ করবে (উপরে থেকে নিচে)।

যতটুকু প্রয়োজন ততটুকু স্থান:

justify-content Flex Items-এর মধ্যে অতিরিক্ত স্থান কীভাবে বণ্টন করা হবে তা নিয়ন্ত্রণ করে। এটি ব্যবহার করে আপনি বিভিন্ন ডিজাইনের জন্য সমান বা অসমান স্থান তৈরি করতে পারেন।

সারাংশ

justify-content Flexbox লেআউটে Flex Items-এর মধ্যে স্থান ব্যবস্থাপনা করার জন্য একটি অত্যন্ত গুরুত্বপূর্ণ প্রপার্টি। এটি উপাদানগুলোকে অনুভূমিক বা উল্লম্ব অক্ষের উপর সঠিকভাবে সাজানোর সুযোগ দেয়, যা ডিজাইনে সহজেই স্থান এবং বিন্যাস নিয়ন্ত্রণ করতে সহায়ক।

justify-content কী?

Flexbox লেআউট সিস্টেমে justify-content একটি গুরুত্বপূর্ণ প্রপার্টি যা Flex Container-এর ভিতরের Flex Items-এর অনুভূমিক বিন্যাস নিয়ন্ত্রণ করে। এটি Flex Items-এর মধ্যে স্থান কীভাবে বিতরণ করা হবে তা নির্ধারণ করে। justify-content প্রপার্টি শুধু অনুভূমিক অক্ষে কাজ করে, যা Flex Items-এর অবস্থান এবং তাদের মধ্যে ব্যবধান নিয়ন্ত্রণে সাহায্য করে।

justify-content এর মানসমূহ

justify-content প্রপার্টি বিভিন্ন মান গ্রহণ করতে পারে, যা Flex Items-এর স্থান বিতরণ এবং বিন্যাসের পদ্ধতি নির্ধারণ করে। নিচে এর মানগুলো এবং তাদের ব্যবহার সম্পর্কে বিস্তারিত আলোচনা করা হলো:

1. flex-start (ডিফল্ট):

• ব্যাখ্যা: Flex Items গুলো কন্টেইনারের বাম দিক থেকে শুরু হয়।
• ব্যবহার: এটি ডিফল্ট মান, যেখানে উপাদানগুলো বাম দিকে সজ্জিত হয়।

.flex-container {
  display: flex;
  justify-content: flex-start;
}

2. flex-end:

• ব্যাখ্যা: Flex Items গুলো কন্টেইনারের ডান দিক থেকে শুরু হয়।
• ব্যবহার: আইটেমগুলো ডান দিকে সজ্জিত করতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  justify-content: flex-end;
}

3. center:

• ব্যাখ্যা: Flex Items গুলো কন্টেইনারের মাঝখানে (কেন্দ্রে) সজ্জিত হয়।
• ব্যবহার: Flex Items-কে অনুভূমিকভাবে কেন্দ্রিত করতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  justify-content: center;
}

4. space-between:

• ব্যাখ্যা: Flex Items গুলো একে অপরের মধ্যে সমান জায়গা নিয়ে সজ্জিত হয়। প্রথম এবং শেষ আইটেমের মধ্যে কোনো জায়গা থাকে না, কিন্তু অন্য আইটেমগুলোর মধ্যে সমান দূরত্ব থাকে।
• ব্যবহার: আইটেমগুলো সমান দূরত্বে বিতরণ করার জন্য ব্যবহৃত হয়।

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

5. space-around:

• ব্যাখ্যা: Flex Items গুলো একে অপরের মধ্যে সমান জায়গা নিয়ে সজ্জিত হয়, তবে আইটেমগুলোর চারপাশে সমান প্যাডিং থাকে।
• ব্যবহার: আইটেমগুলোর মধ্যে সমান দূরত্ব, এবং আইটেমের সীমানার চারপাশেও সমান জায়গা রাখতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  justify-content: space-around;
}

6. space-evenly:

• ব্যাখ্যা: Flex Items গুলো একে অপরের মধ্যে সমান দূরত্বে সজ্জিত হয়, এবং আইটেমগুলোর সীমানার চারপাশেও সমান জায়গা থাকে।
• ব্যবহার: Flex Items-এর মধ্যে এবং আইটেমের সীমানার চারপাশে সমানভাবে জায়গা বিতরণ করতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

justify-content এর উদাহরণ

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS (justify-content এর বিভিন্ন মানের উদাহরণ):

1. flex-start (ডিফল্ট):

   .flex-container {
     display: flex;
     justify-content: flex-start;
     background-color: lightgray;
   }
   .flex-item {
     background-color: teal;
     color: white;
     padding: 10px;
   }
   

2. flex-end:

   .flex-container {
     display: flex;
     justify-content: flex-end;
   }
   

3. center:

   .flex-container {
     display: flex;
     justify-content: center;
   }
   

4. space-between:

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

5. space-around:

   .flex-container {
     display: flex;
     justify-content: space-around;
   }
   

6. space-evenly:

   .flex-container {
     display: flex;
     justify-content: space-evenly;
   }
   

justify-content এর ভূমিকা

justify-content Flexbox লেআউট সিস্টেমে Flex Items-এর অনুভূমিক বিন্যাস নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়। এটি Flex Items-এর মধ্যে সমান বা নির্দিষ্ট দূরত্ব তৈরি করতে সাহায্য করে, যা লেআউট ডিজাইনকে আরও সুন্দর এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে। এর সাহায্যে ওয়েব ডিজাইনাররা সহজেই সঠিকভাবে স্থান বিতরণ করতে পারেন এবং উপাদানগুলোকে কেন্দ্রীভূত বা সমানভাবে বিতরণ করতে সক্ষম হন।

সারাংশ

• justify-content Flex Container-এর ভিতরের Flex Items-এর অনুভূমিক বিন্যাস নিয়ন্ত্রণ করে।
• এটি ব্যবহৃত হয় Flex Items-এর মধ্যে স্থান সমানভাবে বিতরণ করতে বা তাদের সঠিকভাবে সজ্জিত করতে।
• এই প্রপার্টি রেস্পন্সিভ ডিজাইনে সহায়ক এবং ওয়েবপেজের উপাদানগুলোর সাজানো ঠিকঠাক করার জন্য অপরিহার্য।

Flexbox লেআউট মডেলে, justify-content প্রপার্টি এবং এর বিভিন্ন মান (যেমন flex-start, flex-end, center, space-between, space-around) ব্যবহার করে Flex Items-এর মধ্যে অনুভূমিক (horizontal) স্থান এবং বিন্যাস নিয়ন্ত্রণ করা যায়। এই প্রপার্টি ব্যবহার করে আপনি Flex Items-এর মধ্যে স্থান সামঞ্জস্য করতে এবং তাদের সঠিকভাবে সাজাতে পারেন।

1. flex-start

• বিবরণ: flex-start মান ব্যবহার করলে Flex Items গুলো কন্টেইনারের বাম প্রান্তে সাজানো হয়। এটি হলো ডিফল্ট মান যখন justify-content প্রপার্টি সেট করা না থাকে।
• ব্যবহার: Flex Items-গুলো কন্টেইনারের বাম দিকে অবস্থান করবে এবং তাদের মধ্যে কোনও অতিরিক্ত জায়গা থাকবে না।

.flex-container {
  display: flex;
  justify-content: flex-start;
}

2. flex-end

• বিবরণ: flex-end মান ব্যবহার করলে Flex Items গুলো কন্টেইনারের ডান প্রান্তে সাজানো হয়।
• ব্যবহার: Flex Items-গুলো কন্টেইনারের ডান দিকে সঞ্চিত হবে এবং বাকি জায়গা বাম দিকে থাকবে।

.flex-container {
  display: flex;
  justify-content: flex-end;
}

3. center

• বিবরণ: center মান ব্যবহার করলে Flex Items গুলো কন্টেইনারের মধ্যে অনুভূমিকভাবে সেন্টার করা হয়।
• ব্যবহার: Flex Items গুলো কন্টেইনারের মধ্যে সঠিকভাবে কেন্দ্রীভূত হয়, যা অনেক ওয়েব ডিজাইনে জনপ্রিয়।

.flex-container {
  display: flex;
  justify-content: center;
}

4. space-between

• বিবরণ: space-between মান ব্যবহার করলে Flex Items-এর মধ্যে সমান জায়গা (spacing) তৈরি হয়, তবে প্রথম এবং শেষ আইটেমের মধ্যে কোনও অতিরিক্ত জায়গা থাকবে না।
• ব্যবহার: এটি অনেক সময় ব্যবহার করা হয় যখন আপনাকে Flex Items গুলোর মধ্যে স্থান ভাগ করতে হবে, তবে কন্টেইনারের প্রান্তগুলোতে কোনও অতিরিক্ত জায়গা থাকবে না।

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

5. space-around

• বিবরণ: space-around মান ব্যবহার করলে Flex Items-এর মধ্যে সমান জায়গা (spacing) তৈরি হয় এবং প্রতিটি আইটেমের চারপাশে সমান প্যাডিং থাকবে।
• ব্যবহার: Flex Items গুলোর মধ্যে সমান জায়গা থাকবে, এবং প্রথম ও শেষ আইটেমের চারপাশে কিছু অতিরিক্ত জায়গা থাকবে।

.flex-container {
  display: flex;
  justify-content: space-around;
}

6. space-evenly

• বিবরণ: space-evenly মান ব্যবহার করলে Flex Items-এর মধ্যে সমান জায়গা তৈরি হয়, যেখানে প্রথম ও শেষ আইটেমের প্রান্তগুলোতেও সমান জায়গা থাকে।
• ব্যবহার: যখন আপনাকে Flex Items গুলোর মধ্যে এবং কন্টেইনারের প্রান্তে সমান জায়গা চান।

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

উদাহরণ: justify-content প্রপার্টির বিভিন্ন মান

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS (প্রতিটি justify-content মানের জন্য):

.flex-container {
  display: flex;
  width: 100%;
  background-color: lightgray;
  height: 100px;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  text-align: center;
}

.flex-container.flex-start {
  justify-content: flex-start;
}

.flex-container.flex-end {
  justify-content: flex-end;
}

.flex-container.center {
  justify-content: center;
}

.flex-container.space-between {
  justify-content: space-between;
}

.flex-container.space-around {
  justify-content: space-around;
}

.flex-container.space-evenly {
  justify-content: space-evenly;
}

আউটপুট:

• flex-start: সব আইটেম কন্টেইনারের বাম দিকে থাকবে।
• flex-end: সব আইটেম কন্টেইনারের ডান দিকে থাকবে।
• center: আইটেমগুলো কন্টেইনারের মাঝে থাকবে।
• space-between: আইটেমগুলোর মধ্যে সমান দূরত্ব থাকবে, কিন্তু প্রথম এবং শেষ আইটেমের মধ্যে কোনো জায়গা থাকবে না।
• space-around: আইটেমগুলোর চারপাশে সমান জায়গা থাকবে।
• space-evenly: আইটেমগুলোর মধ্যে এবং কন্টেইনারের প্রান্তে সমান জায়গা থাকবে।

সারাংশ

justify-content প্রপার্টির মাধ্যমে Flexbox লেআউটে Flex Items-এর মধ্যে স্থান এবং বিন্যাস নিয়ন্ত্রণ করা হয়। flex-start, flex-end, center, space-between, space-around, এবং space-evenly প্রতিটি মান Flex Items-এর মধ্যে স্থান নির্ধারণে সহায়ক, যা ওয়েব ডিজাইনকে আরও নমনীয় এবং কার্যকরী করে তোলে।

Flexbox-এর justify-content প্রপার্টি দিয়ে আমরা Flex Items-এর মধ্যে স্থান (space) বিতরণ করতে পারি। এর মধ্যে একটি গুরুত্বপূর্ণ মান হলো space-evenly, যা Flex Items-এর মধ্যে সমানভাবে স্থান বিতরণ করে।

space-evenly কী?

space-evenly মানটি Flex Container-এর মধ্যে থাকা Flex Items-এর মধ্যে সমানভাবে স্থান বিতরণ করে, এমনকি প্রথম এবং শেষ আইটেমের সাথে কন্টেইনারের প্রান্ত (edge) এর মধ্যেও সমান দূরত্ব থাকে।

ব্যবহার:

• এটি কিভাবে কাজ করে?
  justify-content: space-evenly; ব্যবহার করলে Flex Items-এর মধ্যে সমান পরিমাণ জায়গা (space) তৈরী হয়, এবং কন্টেইনারের দুই প্রান্তের (left এবং right) মধ্যে সুনির্দিষ্ট পরিমাণ ফাঁকা জায়গা থাকে।

উদাহরণ: space-evenly ব্যবহার

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: space-evenly; /* Flex Items-এর মধ্যে সমান জায়গা বিতরণ */
  background-color: lightgray;
  padding: 10px;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
  width: 100px;
}

আউটপুট:

এই উদাহরণে, justify-content: space-evenly; ব্যবহারের ফলে Flex Items-এর মধ্যে সমানভাবে জায়গা বিতরণ হবে এবং প্রথম ও শেষ আইটেমের সাথে কন্টেইনারের প্রান্তের মধ্যে সমান ফাঁকা জায়গা থাকবে।

space-evenly এবং অন্যান্য justify-content মানের মধ্যে পার্থক্য:

space-evenly ব্যবহারের প্রয়োজনীয়তা

1. নমনীয় লেআউট ডিজাইন:
   space-evenly ব্যবহার করে উপাদানগুলোর মধ্যে সমান দূরত্ব সৃষ্টি করা যায়, যা ডিজাইনকে পরিষ্কার এবং সুসঙ্গত দেখায়।
2. রেস্পন্সিভ ডিজাইন:
   রেস্পন্সিভ ওয়েব ডিজাইনে Flex Items-এর মধ্যে সমান স্থান বজায় রাখা প্রয়োজন হলে space-evenly খুবই কার্যকরী।
3. কনটেইনারের প্রান্তে সমান জায়গা:
   এটি কন্টেইনারের প্রান্তের সাথে সমান ফাঁকা জায়গা রাখতে সাহায্য করে, যা আইটেমগুলোর মধ্যে ভারসাম্যপূর্ণ স্থান তৈরি করে।

সারাংশ

space-evenly হচ্ছে Flexbox-এর একটি শক্তিশালী টুল, যা Flex Items-এর মধ্যে সমানভাবে স্থান বিতরণ করে, এমনকি কন্টেইনারের প্রান্তের সাথে সুনির্দিষ্ট জায়গা রাখে। এটি ওয়েব ডিজাইনকে আরও সুসংগত এবং ভারসাম্যপূর্ণ করতে সাহায্য করে, বিশেষ করে রেস্পন্সিভ লেআউট এবং ইউজার ইন্টারফেস ডিজাইনে।

Flexbox (Flexible Box) লেআউট মডেলটির মাধ্যমে আপনি উপাদানগুলোর অবস্থান খুব সহজে নিয়ন্ত্রণ করতে পারেন। বিশেষত Horizontal অক্ষে (যেমন, অনুভূমিকভাবে) Flex Items-এর অবস্থান নিয়ন্ত্রণ করার জন্য justify-content এবং align-items প্রপার্টি ব্যবহৃত হয়। এই প্রপার্টিগুলোর সাহায্যে আপনি ওয়েব ডিজাইনের উপাদানগুলোর মধ্যে স্থান ব্যবস্থাপনা এবং তাদের অনুভূমিক বিন্যাস সহজেই করতে পারেন।

Horizontal অক্ষ বরাবর আইটেমের অবস্থান নিয়ন্ত্রণ

justify-content

justify-content প্রপার্টি Flex Container-এর অনুভূমিক অক্ষ বরাবর Flex Items-এর অবস্থান নিয়ন্ত্রণ করে। এটি উপাদানগুলোর মধ্যে স্থান নিয়ন্ত্রণের জন্য ব্যবহৃত হয় এবং বিভিন্ন মানের মাধ্যমে আপনি আইটেমগুলোর বিন্যাস ঠিক করতে পারেন।

justify-content এর মানসমূহ:

1. flex-start:
   ফ্লেক্স আইটেমগুলো কনটেইনারের শুরুতে (বামপাশে) স্থাপন করা হয়। এটি ডিফল্ট মান।

   .flex-container {
     display: flex;
     justify-content: flex-start;
   }
   

2. flex-end:
   ফ্লেক্স আইটেমগুলো কনটেইনারের শেষে (ডানপাশে) স্থাপন করা হয়।

   .flex-container {
     display: flex;
     justify-content: flex-end;
   }
   

3. center:
   ফ্লেক্স আইটেমগুলো কনটেইনারের কেন্দ্রের মধ্যে অনুভূমিকভাবে সজ্জিত হয়।

   .flex-container {
     display: flex;
     justify-content: center;
   }
   

4. space-between:
   ফ্লেক্স আইটেমগুলোর মধ্যে সমান দূরত্ব তৈরি হয়, তবে প্রথম এবং শেষ আইটেম কনটেইনারের প্রান্তে অবস্থান করে।

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

5. space-around:
   ফ্লেক্স আইটেমগুলোর মধ্যে সমান প্যাডিং এবং দূরত্ব তৈরি হয়, তবে প্রথম এবং শেষ আইটেমের চারপাশেও প্যাডিং থাকবে।

   .flex-container {
     display: flex;
     justify-content: space-around;
   }
   

6. space-evenly:
   ফ্লেক্স আইটেমগুলোর মধ্যে সমান দূরত্ব তৈরি হয়, এবং প্রথম ও শেষ আইটেমের মধ্যে দূরত্বও সমান থাকে।

   .flex-container {
     display: flex;
     justify-content: space-evenly;
   }
   

উদাহরণ: Horizontal অক্ষ বরাবর আইটেমের অবস্থান

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান দূরত্ব তৈরি হবে */
  background-color: lightgray;
  padding: 10px;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
}

আউটপুট:

এই কোডে Flex Items গুলো justify-content: space-between; এর মাধ্যমে সমান দূরত্বে অনুভূমিকভাবে সাজানো হবে। প্রথম এবং শেষ আইটেম কনটেইনারের প্রান্তে থাকবে এবং মাঝের আইটেমগুলোর মধ্যে সমান জায়গা থাকবে।

align-items এর সাহায্যে উল্লম্ব অবস্থান নিয়ন্ত্রণ

যদিও justify-content অনুভূমিক (horizontal) অক্ষে আইটেমের অবস্থান নিয়ন্ত্রণ করে, align-items প্রপার্টি Flex Items-এর উল্লম্ব (vertical) অবস্থান নিয়ন্ত্রণ করে। এটি Flex Container-এর ভিতরে উল্লম্বভাবে আইটেমগুলোর অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  justify-content: center; /* অনুভূমিকভাবে কেন্দ্র */
  align-items: center;     /* উল্লম্বভাবে কেন্দ্র */
}

এটি Flex Items গুলোকে উল্লম্ব এবং অনুভূমিক উভয় দিকেই কেন্দ্রীভূত করে।

সারাংশ

• justify-content Flex Items-এর অনুভূমিক অবস্থান নিয়ন্ত্রণ করে এবং তাদের মধ্যে স্থান ব্যবস্থাপনা করে।
• align-items Flex Items-এর উল্লম্ব অবস্থান নিয়ন্ত্রণ করে এবং তাদের কন্টেইনারের উল্লম্ব কেন্দ্রে বা প্রান্তে সজ্জিত করে।
• Flexbox ব্যবহার করে আপনি খুব সহজে আইটেমগুলোর বিন্যাস এবং স্থান নিয়ন্ত্রণ করতে পারেন, যা রেস্পন্সিভ ওয়েব ডিজাইনে সহায়ক।

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