فلکس باکس Flex Box چیست؟ چگونه کار می کند؟

فلکس باکسفلکس باکس Flex Box چیه؟فلکس باکس هم یکی از ماژول های قدرتمند سی اس اس برای چیدمان بهتر المان ها در صفحات وب استدر این ماژول عکس آنچه در سی اس اس گرید دیدیم المان فقط در یک محور تراز بندی می شوند به صورت سطری یا ستونیهمچنین برای ریسپانسیو سازی صفحات وب به ما کمک میکند.اگه با مفاهیم واکنش گرایی صفحات وب آشنا نیستی توی پست زیر توضیح دادم. https://vrgl.ir/lpiuI با من همراه باشید تا بیشتر با فلکس باکس آشنا بشیدمفاهیم فلکس باکسنگه دارنده فلکس Flex Containerتگ والدی که برای آن display : flex تعریف می کنیم و تگ های فرزند مستقیم آن فقط به صورت سطری یا ستونی ترازبندی می شوندContainerflex containerآیتم ها Flex Itemsتگ هایی که درون تگ نگه دارنده قرار می گیرند و فرزند مستقیم آن هستند ترازبندی روی آن ها اعمال می شودItemsویژگی های نگه دارنده Container Propertiesاین ویژگی فقط برای Container قابل استفاده هستند دقت کنید برای Items استفاده نکنید!flex-directionهمانطور که قبل تر گفتیم فلکس باکس فقط و فقط در یک محور اعمال می شود اینکه این محور به صورت سطری یا ستونی باشد توسط این ویژگی مشخص می شود دارای دو مقدار سطری row و ستونی column و دو مقدار دیگر که با پسوند reverse هستند همین مقادیر را در محور سطری یا ستونی به صورت عکس اعمال می کنندflex-directionflex-wrapبه صورت پیش فرض آیتم های ما که درون نگه دارنده قرار دارند یک ردیف را تشکیل می دهند و مقدار این ویژگی no-wrap است حال زمانی که بخواهیم با کمتر شدن عرض نگه دارند از عرض یک ردیف آیتم چند ردیف زیر یکدیگر تشکیل بدهیم باید از مقدار wrap برای این ویژگی استفاده کنیم. زمانی که می خواهیم با کوچک تر شدن صفحه وب آیتم ها زیر هم قرار بگیرند تا یک صفحه وب واکنش گرا داشته باشیم کاربردی می باشد.flex-wrapjustify-contentاین ویژگی آیتم ها را درون نگه دارنده در جهت محور اصلی با توجه به فضای خالی که بین آیتم های درون نگه دارنده وجود دارد ترازبندی می کندمحور اصلی ما به ویژگی flex-direction بستگی دارد اگر جهت محور ما ستونی column باشد ویژگی justify در جهت عمودی و اگر سطری row باشد در جهت افقی اعمال می شودمقادیری که برای تراز بندی در این ویژگی وجود دارد به شکل زیر می باشدjustify-contentalign-itemsاین ویژگی آیتم ها را درون نگه دارنده در عکس جهت اصلی ما ترازبندی می کندکمی قبل تر گفتیم محور اصلی توسط ویژگی flex-direction تعریف می شود حال اگر محور اصلی ما سطری باشد این ویژگی ترازبندی آیتم ها را در جهت عکس محور یا همان عمودی و اگر ستونی باشد در جهت عکس محور یا افقی ترازبندی می کند.مقادیر این ویژگی برای تراز بندی به شکل زیر می باشند.align-itemsalign-contentاین ویژگی فقط زمانی اجرا می شود که ویژگی flex-wrap : wrap را برای نگه دارنده خود تعریف کرده باشیم.در جهت عکس محور اصلی اعمال می شود و زمانی که چند ردیف تشکیل می شود آیتم ها را بین فضای خالی که در نگه دارنده وجود دارد ترازبندی می کند.align-contentویژگی های آیتم ها Item Propertiesاین ویژگی فقط برای Item قابل استفاده هستند دقت کنید برای Container استفاده نکنید!orderتگ های ما درون کد HTML با ترتیب بندی خاص خود وجود دارند این ویژگی زمانی که به یک آیتم داده می شود میتواند ترتیبی مجدد و مقدم بر کدهای HTML تعریف کندبه صورت پیش فرض مقدار این ویژگی برای تمام آیتم ها 0 صفر می باشد پس اگر به یک آیتم مقدار 1 یک بدهید به عنوان آخرین آیتم ما قرار می گیرد زمانیکه این ویژگی برای دو آیتم یکسان می باشد تقدم با توجه به کد های HTML مشخص می شودorderflex-growflex-shrinkویژگی grow مشخص می کند که آیتم های ما با نسبتی مشخص (طبق یک فرمول پیچیده محاسبه میشه) تا حدی که می توانند بزرگ شوند تا عرض نگه دارنده را پر کنند.مقدار پیش فرض آن صفر می باشدویژگی shrink مشخص می کند تا با کوچک شدن عرض نگه دارنده زمانی که نیاز است عرض آیتم ها با یک نسبت مشخص کوچک شود تا از نگه دارنده بیرون نزنند.اگر به یک آیتم مقدار بیشتری از این ویژگی ها بدهیم نسبت به بقیه آیتم ها به مقدار بیشتری بزرگ یا کوچک می شوند.shrink & growalign-selfاین ویژگی را قبل تر توضیح دادیم دقیقا کار align-items را می کند با این تفاوت که به جای همه آیتم ها فقط روی یک آیتم اعمال می شودalign-selfاگه علاقه دارید با فلکس باکس یکم بازی کنید تا بهتر مسلط بشید به وب سایت زیر سر بزنید :) https://flexboxfroggy.com/ اگه علاقه داری با گرید هم آشنا بشی توی پست زیر توضیح دادم https://vrgl.ir/g9EpK منابعA Complete Guide to Flexbox