آشنایی با فلکس باکس (Flexbox)

ماژول flexbox یا همان CSS Flexbox Layout Module یکی از موار بسیار کاربردی است که برای حل مشکلات فراوانی که در چینش المان ها در ورژن های قبلی CSS وجود داشت به ورژن CSS3 اضافه شد.

قبل از روی کار آمادن flexbox از ویژگی float برای چینش المان ها در کنار هم استفاده می شد که با افزایش تعداد المان ها مخصوصا تگ های تو در تو کار با ویژگی float نیز سخت می شد.

قبل از ماژول Flexbox ، چهار حالت برای چیدمان المان ها وجود داشت :

• Block, برای بخش های یک صفحه وب
• Inline, برای متن ها
• Table, برای داده های جدول دو بعدی
• Positioned, برای موقعیت صریح یک عنصر
  

در واقع فلکس باکس درطراحی‌ صفحات واکنش‌گرا یا همان Responsive کارایی زیادی دارد، چرا که با چیدن آیتم‌ ها (Flex Item) درون یک سطر یا ستون در قالب نگه‌ دارنده (Flex Container)، به طور خودکار عناصر طراحی را با اندازه‌ی صفحه منطبق کرده و مشکلاتی مانند Float یا Whitespace را برطرف می‌کند. از کاربری های FlexBox می‌توان به طراحی راحت چند سطری و یا چند ستونی صفحات وب اشاره کرد.

از مزایای استفاده از flexbox در css می توان به موارد زیر اشاره کرد:

• به کمک ویژگی flex در css قراردادن المان‌ ها کنار یکدیگر در یک ردیف بدون نیاز به تعیین اندازه‌ دقیق پهنا و هم‌ تراز سازی نسبت به المان نگهدارنده امکان پذیر است.
• با استفاده از display flex در css تغییر ترتیب المان‌ها به آسانی امکان‌ پذیر است.
• اگر برای عنصر هایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی به کمک مقدار flex-wrap در css عنصر آخر به صورت خودکار در ردیف بعد قرار می‌ گیرد.
• تعیین اندازه‌ی یک المان نسبت به اندازه‌ی المان نگهدارنده به‌صورت واکنش‌ گرا ممکن است.
• به کمک مقادیر مرتبط با ویژگی Flex پشتیبانی از چیدمان معکوس نیز امکان پذیر است.

برای آشنایی بیشتر با قابلیت ها و ویژگی های فلکس باکس می توانید به سایت www.flexbox.help مراجعه نمائید.