ساختار Flexbox در CSS: از پایه تا پیاده‌سازی

Flexbox از چه چیزهایی تشکیل شده است؟

سیستم Flexbox در CSS از دو جزء اصلی تشکیل شده است:

• Flex Container (ظرف انعطاف‌پذیر): عنصر والد که شامل آیتم‌های انعطاف‌پذیر می‌شود.
• Flex Items (آیتم‌های انعطاف‌پذیر): عناصر فرزند داخل ظرف که رفتار انعطاف‌پذیر به خود می‌گیرند.

قدم اول: ایجاد رابطه پدر-فرزندی

برای شروع کار با Flexbox، ابتدا نیاز داریم یک رابطه پدر-فرزندی بین مجموعه‌ای از عناصر ایجاد کنیم، یعنی باید:

1. آیتم‌هایی که می‌خواهیم در صفحه بچینیم را درون یک عنصر والد قرار دهیم.
2. به عنصر والد خاصیت display: flex را اعمال کنیم.

دستورات اصلی Flexbox

دستورات Flexbox به دو دسته اصلی تقسیم می‌شوند:

        1. دستورات مربوط به Flex Container

• display: flex – فعال‌سازی Flexbox
• flex-direction – تعیین جهت چیدمان (row/column)
• justify-content – ترازبندی در جهت اصلی
• align-items – ترازبندی در جهت عمود بر جهت اصلی
• flex-wrap – کنترل رفتن به خط جدید

        2. دستورات مربوط به Flex Items

• order – تغییر ترتیب نمایش
• flex-basis – اندازه پیش‌فرض
• flex-grow – تعیین میزان رشد آیتم
• flex-shrink – تعیین میزان جمع‌شدن آیتم
• align-self – ترازبندی فردی آیتم

مثال عملی ساخت Flexbox

در این مثال ساده، یک Flex Container با سه Flex Item ایجاد می‌کنیم:

<div class="flex-container">

    <div class="flex-item">آیتم 1</div>
    <div class="flex-item">آیتم 2</div>
    <div class="flex-item">آیتم 3</div>
</div>

<style>
.flex-container {
    display: flex;
    justify-content: space-between;
    background-color: #f0f0f0;
    padding: 10px;
}
    
.flex-item {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    margin: 5px;
}
</style>
        

همانطور که توضیح دادیم با این کد ساده می‌توانید یک چیدمان انعطاف‌پذیر ایجاد کنید که به صورت خودکار آیتم‌ها را در صفحه خواهد چید، تصویر خروجی نمونه کد فوق به شکل زیر خواهد بود :