CSS3 Flexible Box Layouts (Flexbox লেআউট)

Flexbox (Flexible Box Layout) CSS3-এ একটি শক্তিশালী লেআউট মোড যা জটিল অ্যাপ্লিকেশন এবং ওয়েব পেজের লেআউট সহজ করে তোলে।

ফ্লেক্স কন্টেইনার প্রোপার্টি

flex-direction — row / column / row-reverse / column-reverse
flex-wrap — nowrap / wrap / wrap-reverse
flex-flow — direction + wrap শর্টহ্যান্ড
justify-content — মেইন অ্যাক্সিস অ্যালাইনমেন্ট
align-items — ক্রস অ্যাক্সিস অ্যালাইনমেন্ট
align-content — মাল্টি-লাইন ক্রস অ্যাক্সিস অ্যালাইনমেন্ট

উদাহরণ: ফ্লেক্স লেআউট

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  .container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: lightblue; }
  .container1 { align-self: flex-start; display: flex; background-color: rgb(71, 30, 255); width: 200px; margin: 20px; }
  .container1 > div, .container2 > div, .container3 > div, .container4 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; }
  .container2 { display: flex; background-color: rgb(14, 126, 79); width: 200px; justify-content: center; align-self: flex-start; margin: 20px; }
  .container3 { display: flex; flex-direction: column; background-color: rgb(168, 60, 10); width: 200px; align-items: center; margin: 20px; }
  .container4 { background-color: rgb(26, 10, 168); width: 200px; margin: 20px; }
</style>
</head>
<body>
  <h1>ফ্লেক্স লেআউট উদাহরণ</h1>
  <div class="container">
    <div class="container1"><div>1</div><div>2</div><div>3</div></div>
    <div class="container2"><div>1</div><div>2</div><div>3</div></div>
    <div class="container3"><div>1</div><div>2</div><div>3</div></div>
    <div class="container4"><div>1</div><div>2</div><div>3</div></div>
  </div>
</body>
</html>

কন্টেইনার ভেরিয়েশন ব্যাখ্যা

.container1: row direction (ডিফল্ট), flex-start alignment
.container2: row direction, justify-content: center
.container3: flex-direction: column, align-items: center
.container4: ডিফল্ট ফ্লেক্স (row, nowrap, stretch)

ফ্লেক্স আইটেম প্রোপার্টি

order, flex-grow, flex-shrink, flex-basis, flex, align-self