فلکس (Flex)

فلکس باکس (Flexbox) یعنی چیدمان انعطاف پذیر. آیتم ها مثل لگو کنار هم می نشینند. دیگر از float بی نیاز می شوی. در بوت استرپ، کلاس ها این کار را ساده می کنند.

شروع سریع با d-flex

برای ساخت ظرف فلکسی، از کلاس d-flex استفاده کن. سپس فرزندان، آیتم های فلکس می شوند.

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

مشاهده در ادیتور

حالت اینلاین با d-inline-flex

اگر می خواهی ظرف فلکس در خط بماند، از d-inline-flex استفاده کن.

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

مشاهده در ادیتور

جهت افقی و عمودی

کلاس های flex-row و flex-row-reverse جهت افقی را تنظیم می کنند. برای ستون، از flex-column و flex-column-reverse استفاده کن.

<div class="d-flex flex-row bg-secondary mb-3">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

مشاهده در ادیتور

<div class="d-flex flex-column mb-3">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

مشاهده در ادیتور

تراز افقی: justify-content

برای چیدمان افقی، از کلاس های justify-content-* مثل start، end، center، between و around استفاده کن.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

مشاهده در ادیتور

عرض برابر: flex-fill

کلاس flex-fill آیتم ها را هم عرض می کند. مثل تقسیم مساوی نمره ها.

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>

مشاهده در ادیتور

پرشدن فضا: flex-grow

کلاس flex-grow-1 می گوید آیتم فضای خالی را پر کند. شبیه کش آمدن یک فنر.

<div class="d-flex">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>

مشاهده در ادیتور

نکته: برای جمع شدن اجباری، از flex-shrink-1 استفاده کن.

تغییر ترتیب: order

با order-* نمایش را جابه جا کن. عدد کمتر، جلوتر دیده می شود.

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex item 1</div>
  <div class="p-2 bg-warning order-2">Flex item 2</div>
  <div class="p-2 bg-primary order-1">Flex item 3</div>
</div>

مشاهده در ادیتور

فاصله خودکار: ms-auto / me-auto

برای هل دادن آیتم ها، از ms-auto یا me-auto استفاده کن. مثل چسباندن یک کارت به گوشه.

<div class="d-flex bg-secondary mb-3">
  <div class="p-2 ms-auto bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 me-auto bg-primary">Flex item 3</div>
</div>

مشاهده در ادیتور

سطرشکنی: wrap

با flex-wrap، آیتم ها به خط بعد می روند. با flex-nowrap نمی روند. نسخه برعکس هم flex-wrap-reverse است.

<div class="d-flex flex-wrap">...</div>
<div class="d-flex flex-wrap-reverse">...</div>
<div class="d-flex flex-nowrap">...</div>

مشاهده در ادیتور

تراز محتوایی چندسطره: align-content

برای ردیف های جمع شده، از align-content-* استفاده کن. گزینه ها شامل start، end، center، between، around و stretch هستند.

<div class="d-flex flex-wrap align-content-start">...</div>
<div class="d-flex flex-wrap align-content-end">...</div>
<div class="d-flex flex-wrap align-content-center">...</div>
<div class="d-flex flex-wrap align-content-around">...</div>
<div class="d-flex flex-wrap align-content-stretch">...</div>

مشاهده در ادیتور

تراز آیتم ها در یک ردیف: align-items

برای یک ردیف، از align-items-* استفاده کن. گزینه ها: start، end، center، baseline و stretch.

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

مشاهده در ادیتور

تراز یک آیتم خاص: align-self

برای یک آیتم مشخص، از align-self-* استفاده کن. این، همان آیتم را جدا تنظیم می کند.

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

مشاهده در ادیتور

کلاس های واکنش گرا

تقریباً همه کلاس ها نسخه واکنش گرا دارند. به جای * از sm، md، lg، xl یا xxl استفاده کن.

نکته: مثال های واکنش گرا در لینک های Try it در همان صفحه مرجع هستند.

گام های عملی

1. ظرف فلکس را با d-flex بساز.
2. جهت را با flex-row یا flex-column تعیین کن.
3. تراز افقی را با justify-content تنظیم کن.
4. تراز عمودی را با align-items یا align-content بده.
5. در نیاز، از flex-fill، order و ms-auto کمک بگیر.

جمع بندی سریع

• فلکس باکس چیدمان را بسیار ساده می کند.
• d-flex شروع همه چیز است.
• جهت با row و column عوض می شود.
• تراز را با justify و align بده.
• با flex-fill عرض ها برابر می شوند.

مطالب مرتبط: حالت تیره (Dark Mode)، فرم ها (Forms)، فلکس بوت استرپ.