CSS-এ ফ্লেক্স ব্লকগুলির ক্রস অক্ষ বরাবর অ্যালাইনমেন্ট

আসুন এখন ব্লকগুলিকে ক্রস অক্ষ বরাবরও অ্যালাইন করি। এই অক্ষ বরাবর অ্যালাইনমেন্ট align-items বৈশিষ্ট্য দ্বারা নির্দিষ্ট করা হয়। flex-start মান উপাদানগুলিকে অক্ষের শুরুতে ঠেলে দেয়, এবং flex-end মান - শেষে।

আসুন উদাহরণের মাধ্যমে চেষ্টা করি।

উদাহরণ

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

মূল অক্ষ বরাবর ব্লকগুলিকে এর শুরুতে, অর্থাৎ বাম প্রান্তে ঠেকিয়ে দিই। এর জন্য justify-content flex-start মানে সেট করুন। ক্রস অক্ষ বরাবরও ব্লকগুলিকে এর শুরুতে, অর্থাৎ উপরের প্রান্তে ঠেকিয়ে দিই। এর জন্য align-items flex-start মানে সেট করুন।

দেখি আমরা কী পাচ্ছি:

css.parent {
  display: flex;
  flex-direction:  row;        /* মূল অক্ষ ডানদিকে, ক্রস অক্ষ নীচের দিকে */
  justify-content: flex-start; /* ব্লকগুলি মূল অক্ষের শুরুতে */
  align-items:     flex-start; /* ব্লকগুলি ক্রস অক্ষের শুরুতে */
}

কোড 실행ের ফলাফল:

উদাহরণ

আসুন এখন ব্লকগুলিকে ক্রস অক্ষের শেষে, অর্থাৎ নীচে ঠেকিয়ে দিই। এর জন্য align-items flex-end মানে সেট করুন:

css.parent {
  display: flex;
  flex-direction:  row;        /* মূল অক্ষ ডানদিকে, ক্রস অক্ষ নীচের দিকে */
  justify-content: flex-start; /* ব্লকগুলি মূল অক্ষের শুরুতে */
  align-items:     flex-end;   /* ব্লকগুলি ক্রস অক্ষের শেষে */
}

কোড 실행ের ফলাফল:

উদাহরণ

এখন মূল অক্ষকে উপর থেকে নীচের দিকে নির্দেশিত করি। যেহেতু মূল অক্ষ উল্লম্ব, তাই ক্রস অক্ষটি ডান থেকে বামে নির্দেশিত হবে। আসুন উভয় অক্ষ বরাবর ব্লকগুলিকে তাদের শুরুতে ঠেকিয়ে দিই:

css.parent {
  display: flex;
  flex-direction:  column;     /* মূল অক্ষ নীচের দিকে, ক্রস অক্ষ ডানদিকে */
  justify-content: flex-start; /* ব্লকগুলি মূল অক্ষের শুরুতে */
  align-items:     flex-start; /* ব্লকগুলি ক্রস অক্ষের শুরুতে */
}

কোড 실행ের ফলাফল:

উদাহরণ

এবং এখন ক্রস অক্ষ বরাবর ব্লকগুলিকে এর শেষে ঠেকিয়ে দিই:

css.parent {
  display: flex;
  flex-direction:  column;     /* মূল অক্ষ নীচের দিকে, ক্রস অক্ষ ডানদিকে */
  justify-content: flex-start; /* ব্লকগুলি মূল অক্ষের শুরুতে */
  align-items:     flex-end;   /* ব্লকগুলি ক্রস অক্ষের শেষে */
}

কোড 실행ের ফলাফল:

উদাহরণ

উভয় অক্ষের শেষে ব্লকগুলিকে ঠেকিয়ে দিই:

css.parent {
  display: flex;
  flex-direction:  column;   /* মূল অক্ষ নীচের দিকে, ক্রস অক্ষ ডানদিকে */
  justify-content: flex-end; /* ব্লকগুলি মূল অক্ষের শেষে */
  align-items:     flex-end; /* ব্লকগুলি ক্রস অক্ষের শেষে */
}

কোড 실행ের ফলাফল:

উদাহরণ

আসুন মূল অক্ষের দিক পরিবর্তন করি - এটিকে নীচ থেকে উপরের দিকে নির্দেশিত করি। এতে ক্রস অক্ষের দিক পরিবর্তন হবে না, কারণ মূল অক্ষ এখনও উল্লম্ব।

উভয় অক্ষের শুরুতে ব্লকগুলিকে ঠেকিয়ে দিই:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* মূল অক্ষ উপরের দিকে, ক্রস অক্ষ ডানদিকে */
  justify-content: flex-start;     /* ব্লকগুলি মূল অক্ষের শুরুতে */
  align-items:     flex-start;     /* ব্লকগুলি ক্রস অক্ষের শুরুতে */
}

কোড 실행ের ফলাফল:

ব্যবহারিক কাজ