فلکس‌باکس یک ویژگی شگفت‌انگیز و بسیار مفید در CSS است که برای طراحی‌های پیچیده و در عین حال بسیار انعطاف‌پذیر استفاده می‌شود. با استفاده از flexbox، با چالش‌های بزرگی در طراحی وب می‌توانید به‌راحتی مواجه شوید و آنها را مدیریت کنید. در اینجا می‌خواهیم به برخی از موارد استفاده‌ی معمولی فلکس‌باکس بپردازیم.
یکی از کاربردهای رایج فلکس‌باکس، ترازبندی آیتم‌ها به صورت افقی و عمودی است. این امر به طراحی‌های وسط‌چین کمک شایانی می‌کند، جایی که نیاز دارید عناصر دقیقاً در وسط یک بخش قرار گیرند. به‌خصوص زمانی که ابعاد عناصر یا بخش‌ها پویا و متغیر هستند، فلکس‌باکس برای ترازبندی دقیق بسیار مفید است.
همچنین، فلکس‌باکس برای مدیریت فاصله‌ها میان عناصر نیز بکار می‌رود. ویژگی‌های flexbox برای تنظیم فاصله‌ی مناسب بین آیتم‌ها بدون نیاز به استفاده از ویژگی‌های حاشیه یا padding، بسیار کارآمد هستند. به‌علاوه، می‌توانید فضای خالی را به طور مساوی بین عناصر توزیع کنید.
فلکس‌باکس برای طراحی رابط‌های کاربری که به صورت رسپانسیو هستند و به کاربر اجازه می‌دهد تا در دستگاه‌های مختلف بهترین تجربه را داشته باشند، به خوبی کار می‌کند. با flexbox می‌توانید چیدمان آیتم‌ها را بسته به فضای موجود در صفحه تغییر داده و بهینه کنید.
مثال کد CSS برای فلکس‌باکس
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.item {
margin: 10px;
padding: 20px;
background: lightgray;
}
توضیح قدم به قدم کد بالا
display: flex;
این ویژگی container را به یک flex container تبدیل می‌کند که مخزنی برای تنظیمات فلکس‌باکس می‌شود.
justify-content: center;
برای ترازبندی آیتم‌ها به مرکز در جهت افقی استفاده می‌شود.
align-items: center;
برای ترازبندی آیتم‌ها به صورت عمودی در مرکز مخزن استفاده می‌شود.
flex-direction: row;
جهت چیدمان آیتم‌ها را به صورت افقی مشخص می‌کند.
margin: 10px;
فاصله‌ی بیرونی اطراف هر آیتم را مشخص می‌کند.
padding: 20px;
فاصله‌ی داخلی اطراف محتوای هر آیتم را تنظیم می‌کند.
background: lightgray;
رنگ پس‌زمینه‌ای برای آیتم‌ها تنظیم می‌کند.