CSS-এ ফ্লেক্সে টাইলিং

চলুন এখন শিখি কিভাবে ফ্লেক্সবক্সে টাইলিং করতে হয়। প্রথমে একাধিক সারিতে ফ্লেক্স ব্লক সাজাই, প্রতি সারিতে তিনটি ব্লক রাখি।

এটি করার জন্য, ফ্লেক্সের প্যারেন্টের প্রস্থ সেট করুন 300px এবং flex-wrap এর মান wrap, এবং চাইল্ডের প্রস্থ 100px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

চলুন এখন আমাদের ব্লকগুলির মধ্যে অনুভূমিক দূরত্ব তৈরি করি। এটি করার জন্য, প্যারেন্টের প্রস্থ বাড়ান যাতে গ্যাপের জন্য অতিরিক্ত জায়গা পাওয়া যায়।

যেহেতু আমাদের একটি সারিতে তিনটি ব্লক আছে, তার মানে যে তাদের মধ্যে দুটি ফাঁক আছে। ধরা যাক আমরা চাই যে প্রতিটি ফাঁকের প্রস্থ হবে 10px। দেখা যাচ্ছে যে প্যারেন্টের প্রস্থ 20px দ্বারা বাড়ানো দরকার, অর্থাৎ এটি করা 300px নয়, বরং 320px।

চলুন এখন ব্লকগুলির প্যারেন্টকে justify-content এর মান space-between সেট করি এবং পাই ব্লকগুলির মধ্যে কাঙ্খিত দূরত্ব:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

চলুন এখন ব্লকগুলির মধ্যে একই দূরত্ব যোগ করি উল্লম্বভাবে। এটি করার জন্য, আপনি align-content প্রপার্টি space-between মানতে সেট করতে পারেন।

যাইহোক, এর জন্য প্যারেন্টের উচ্চতা সেট করা প্রয়োজন, অন্যথায় align-content কাজ করবে না। চলুন উচ্চতা 320px সেট করি। এই ক্ষেত্রে, আমাদের ঠিক তিনটি সারি ব্লক 100px উচ্চতা সহ প্লাস সারির মধ্যে দুটি 10px ফাঁক ফিট হবে।

চলুন এটি চালাই:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  height: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

সবই দুর্দান্তভাবে কাজ করে, কিন্তু কিছু আছে সমস্যা যা আমরা পরবর্তী পাঠে বিবেচনা করব।