Flexbox: One-Dimensional Layout

8. Practice Problems

Every problem has a Show Answer button with real, runnable CSS. Try it yourself first.

1. Turn a <div> with three child boxes into a flex row and add a 12px gap between them.
   তিনটি child বক্সসহ একটি <div>-কে flex row বানান এবং তাদের মধ্যে 12px gap দিন।
   ✨ Show Answer (উত্তর দেখুন)

   ans1.html

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

   style.css

   .row { display: flex; gap: 12px; }
   .box { width: 60px; height: 60px; background: #39b549; }

   Run Copy
2. Perfectly center a single "Login" button both horizontally and vertically inside a full-height container.
   একটি full-height container-এর ভেতরে একটি "Login" বাটনকে অনুভূমিক ও উল্লম্ব দুই দিকেই perfectly center করুন।
   ✨ Show Answer (উত্তর দেখুন)

   ans2.html

   <div class="screen">
     <button class="login">Login</button>
   </div>

   style.css

   .screen {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 200px;
     background: #f8f9fa;
   }
   
   .login {
     padding: 12px 26px;
     border: none;
     border-radius: 8px;
     background: #39b549;
     color: white;
     font-weight: 700;
   }

   Run Copy
3. Build a navbar with a logo on the far left and three nav links pushed to the far right.
   একটি navbar বানান যেখানে লোগো বাম প্রান্তে এবং তিনটি nav link ডান প্রান্তে থাকবে।
   ✨ Show Answer (উত্তর দেখুন)

   ans3.html

   <nav class="navbar">
     <div class="logo">ABCL TECH</div>
     <div class="links">
       <a href="#">Home</a>
       <a href="#">Courses</a>
       <a href="#">Contact</a>
     </div>
   </nav>

   style.css

   .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 14px 20px;
     background: #0f172a;
     color: white;
   }
   
   .links { display: flex; gap: 18px; }
   .links a { color: white; text-decoration: none; }

   Run Copy
4. Create a two-column layout: a 200px fixed sidebar and a content area that fills all remaining space.
   দুই-কলাম লেআউট বানান: একটি 200px fixed sidebar এবং বাকি সব জায়গা নেওয়া একটি content area।
   ✨ Show Answer (উত্তর দেখুন)

   ans4.html

   <div class="layout">
     <aside class="sidebar">Sidebar</aside>
     <main class="content">Content fills the rest</main>
   </div>

   style.css

   .layout { display: flex; height: 150px; }
   
   .sidebar {
     flex: 0 0 200px;
     background: #0f172a;
     color: white;
     padding: 12px;
   }
   
   .content {
     flex: 1;
     background: #f8f9fa;
     padding: 12px;
   }

   Run Copy
5. In two sentences, explain why flex: 1 on multiple sibling items splits the remaining space evenly between them.
   দুই বাক্যে ব্যাখ্যা করুন — একাধিক sibling item-এ flex: 1 দিলে বাকি জায়গা কীভাবে সমানভাবে ভাগ হয়।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: flex: 1 sets flex-grow to 1 on every item, and flex-grow values act as ratios of the leftover space after basis sizes are accounted for. Since all items share the same ratio (1), the leftover space is split into equal parts.

   flex: 1 প্রতিটি item-এ flex-grow: 1 সেট করে, এবং flex-grow মানগুলো basis সাইজ বাদ দেওয়ার পর বাকি জায়গার অনুপাত হিসেবে কাজ করে। সব item-এর অনুপাত সমান (1) হওয়ায়, বাকি জায়গা সমান ভাগে ভাগ হয়ে যায়।