CSS Flexbox — 10 Minute-e Complete Guide

Flexbox holo modern CSS-er ekta magic tool jeta diye tumi elements-ke easily line-e ba column-e sajate paro.

Step 1: Parent-ke flex bolo

.box {
  display: flex;
}

Ekhon jotogulo child ache tara automatically ek row-e boshe jabe.

Step 2: Horizontal center — justify-content

.box {
  display: flex;
  justify-content: center; /* center-e */
}

Onno options:

• flex-start — left
• flex-end — right
• space-between — dui pashe ar modhye faka
• space-around — protyek er charidike shoman faka

Step 3: Vertical center — align-items

.box {
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
}

Ei duita ekshathe use korle child ekdom middle-e bhashe. Modal, popup — sob ei technique-e center kora hoy.

Step 4: Gap deya

.box {
  display: flex;
  gap: 1rem;  /* 16px faka prottek item-er modhye */
}

Step 5: Column layout

.box {
  display: flex;
  flex-direction: column; /* row er bodole column */
}

Step 6: Chhoto screen-e wrap

.box {
  display: flex;
  flex-wrap: wrap;  /* jayga na paile niche cholbe */
}

Real world example

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

<style>
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
</style>

Bootstrap er d-flex, justify-content-center, align-items-center classes-o thik ei kaj-i kore — pichoner theory ekhon tumi janle!