Flexbox ها کدهای جدید در CSS می باشند که توسط W3C برای رفع مشکلات استفاده از کد های float و طراحی زیبا و دقیق تر سایت ها بخصوص سایت های ریسپانسیو ارائه شده است. پس از منسوخ شدن استفاده از table در طراحی قالب سایت، استفاده از کد float جز کد های پرطرفدار طراحان به شمارمی رفت که استفاده از آن طراحان را دچار مشکلاتی می کرد.
علاوه بر اینکه استفاده از Flexbox ها اصولی تر از کدهای Float می باشند، استفاده از آن تاثیر بسزایی درindex صفحات سایت توسط موتورهای جستجوی گوگل نیز دارد و در نتیجه در سئوی سایت بسیار موثر است.
مهمترین نکته ای که در روزهای اول ارائه Flexbox وجود داشت این بود که این کدها تنها برای طراحی بخشی از صفحه سایت (برای مثال منو) استفاده می گردید و برای طراحی قالب کل صفحه مورد استفاده نبود، چرا که برای ساخت قالب اصلی سایت با Flexbox ها باید از مجموعه کدهای Flexbox و CSS در کنار هم استفاده شود که به این مجموعه Grid Layout Module گفته می شود. جدا از تمام مزایای Grid Layout Module، این مجموعه یک محدویت بزرگ را برای طراحان به همراه داشت، حتی آخرین نسخه های بروزرسانی مرورگرها هم با آن مشکل داشت. در واقع یکی از علت هایی که ورژن های مختلفی از Flexbox ها ارائه شد تردید شرکت های ارائه دهنده مرورگر ها در پشتیبانی از آن بود.
امروزه قالبلیت های Flexbox تنها در مرورگر IE9 و پایین تر قابل پشتیبانی نیست.
به کمک کد های Flexbox می توانیم بجای اینکه برای هر آبجکت بصورت انفرادی خصوصیت تعیین کنیم، تمام آبجکت ها را بصورت گروه در آورده و برای آنها style های گروهی قرار دهیم. در واقع استفاده از Flexbox ها بهترین گزینه برای موقعیت دهی آبجکت های درون یک صفحه می باشد.
طراحی یک نمونه ساده با استفاده از Flexbox
در عناصر html یک کلاس با عنوان (برای مثال ) container-flex. معرفی کنید. اگر در قسمت style کد زیر را قرار دهید:
.container-flex{displaye:flex;}
فرزندان آن عنصر خاصیت Flex item را دارا می شوند و شما به راحتی می توانید نحوه قرار گیری این عناصر را مشخص نمایید.
به طور کلی Flexbox ها از دو قسمت اصلی ساخته شده اند قسمت اول تمام خصوصیت هایی است که به آبجکت های <div> اصلی اختصاص داده می شود و قسمت دوم خصوصیت هایی است که به فرزندان (child) آن اختصاص داده می شود.
یک چیدمان بسیار ساده با Flexbox در زیر قرار گرفته است: