তৈরি করা প্যানকেক

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

এই প্রভাবের জন্য ফ্লেক্সবক্স ব্যবহার করে, পর্দার আকার পরিবর্তন করার সময় এই উপাদানগুলির স্থান নির্ধারণের জন্য আপনার মিডিয়া প্রশ্নের প্রয়োজন হবে না।

ফ্লেক্স শর্টহ্যান্ডের অর্থ হল: flex: <flex-grow> <flex-shrink> <flex-basis> ।

flex-grow স্ট্রেচিং

আপনি যদি বাক্সগুলিকে প্রসারিত করতে চান এবং পরের লাইনে মোড়ানোর সাথে সাথে স্থানটি পূরণ করতে চান তবে <flex-grow> এর মান 1 এ সেট করুন, উদাহরণস্বরূপ:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

এখন, আপনি স্ক্রিনের আকার বাড়াতে বা হ্রাস করার সাথে সাথে এই ফ্লেক্স আইটেমগুলি সঙ্কুচিত এবং বৃদ্ধি পায়।

স্ট্রেচিং নেই

আপনি যদি চান যে আপনার বাক্সগুলি তাদের <flex-basis> আকারে পূরণ হোক, ছোট আকারে সঙ্কুচিত করুন, কিন্তু কোনো অতিরিক্ত স্থান পূরণ করার জন্য প্রসারিত করবেন না, লিখুন: flex: 0 1 <flex-basis> । এই ক্ষেত্রে, আপনার <flex-basis> হল 150px:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}