یادگیری کار با فلکس‌باکس در CSS یک قدم بزرگ به سمت طراحی لایه‌های واکنش‌گرا و انعطاف‌پذیر است. فلکس‌باکس به ما این امکان را می‌دهد که آیتم‌ها را در یک کانتینر به راحتی آرایش کنیم و نسبت‌های آن‌ها را در جهت اصلی کنترل کنیم. استفاده از ویژگی‌های فلکس‌باکس مثل flex-grow، flex-shrink و flex-basis به ما اجازه می‌دهد تا نسبت‌های آیتم‌ها را تعیین کنیم.
وقتی می‌خواهید آیتم‌ها در یک کانتینر فلکس به نسبت‌های دلخواه خود تغییر اندازه دهند، flex-grow مهمترین ویژگی است. این ویژگی نشان می‌دهد که هر آیتم چقدر می‌تواند از فضای اضافی استفاده کند. به طور مشابه، flex-shrink مشخص می‌کند که آیتم‌ها چقدر می‌توانند از فضای خود کم کنند تا در فضای کانتینر جا شوند.
کاربرد صحیح این ویژگی‌ها می‌تواند به شما کمک کند تا لایه‌بندی‌ای بسازید که به طور دینامیکی به ابعاد صفحه نمایش یا هر تغییر دیگری واکنش نشان دهد، بدون اینکه مجبور به استفاده از اندازه‌های ثابت باشید.
بیایید یک مثال از استفاده از این ویژگی‌ها ببینیم:
<style>
.container {
display: flex;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
توضیح کد
.container: <br> این کلاس به کانتینر اصلی تنظیم display: flex; می‌دهد تا بتواند به عنوان یک فلکس‌باکس عمل کند..item: <br> هر آیتم دارای سه ویژگی فلکس است. flex-grow: 1;: <br> آئتم‌ها می‌توانند فضای اضافی را به صورت مساوی بین خود تقسیم کنند. flex-shrink: 1;: <br> اگر فضای کانتینر کوچک شود، هر آیتم به طور متناسب از فضای خود می‌کاهد. flex-basis: 100px;: <br> اندازه اولیه هر آیتم 100 پیکسل است. margin: 10px; و background-color: lightblue;: <br> برای دادن فاصله و رنگ زمینه زیبا.