Flexbox কী?
Flexbox হলো এক-মাত্রিক লেআউট সিস্টেম — সারি বা কলামে element সাজানোর জন্য। আধুনিক ওয়েবের সবচেয়ে জনপ্রিয় লেআউট টুল।
মৌলিক কাঠামো
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: flex;
}
Parent (Container) Properties
.container {
display: flex;
/* মূল অক্ষের দিক */
flex-direction: row; /* row-reverse, column, column-reverse */
/* মূল অক্ষে সাজানো */
justify-content: flex-start; /* center, flex-end, space-between,
space-around, space-evenly */
/* ক্রস অক্ষে সাজানো */
align-items: stretch; /* center, flex-start, flex-end, baseline */
/* একাধিক লাইন হলে */
flex-wrap: nowrap; /* wrap, wrap-reverse */
align-content: flex-start; /* center, space-between */
/* সংক্ষিপ্ত */
flex-flow: row wrap;
/* item এর মাঝে gap */
gap: 20px;
row-gap: 10px;
column-gap: 20px;
}
Child (Item) Properties
.item {
flex-grow: 1; /* বাড়তি জায়গা দখল (ratio) */
flex-shrink: 1; /* জায়গা কম হলে ছোট হবে */
flex-basis: auto; /* শুরুর size */
/* সংক্ষিপ্ত */
flex: 1; /* = 1 1 0 */
flex: 0 0 200px; /* fixed 200px, বাড়বে-কমবে না */
/* নিজের জন্য align override */
align-self: center;
/* order */
order: 2; /* কম number আগে আসে */
}
বাস্তব উদাহরণ: Navbar
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.logo { font-size: 1.5rem; font-weight: bold; }
.nav-links { display: flex; gap: 20px; }
বাস্তব উদাহরণ: Center কিছু
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Card Grid
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* min 300px, বাড়তে পারে */
}