فلکس باکس هم یکی از ماژول های قدرتمند سی اس اس برای چیدمان بهتر المان ها در صفحات وب است
در این ماژول عکس آنچه در سی اس اس گرید دیدیم المان فقط در یک محور تراز بندی می شوند به صورت سطری یا ستونی
همچنین برای ریسپانسیو سازی صفحات وب به ما کمک میکند.
اگه با مفاهیم واکنش گرایی صفحات وب آشنا نیستی توی پست زیر توضیح دادم.
با من همراه باشید تا بیشتر با فلکس باکس آشنا بشید
نگه دارنده فلکس Flex Container
تگ والدی که برای آن display : flex تعریف می کنیم و تگ های فرزند مستقیم آن فقط به صورت سطری یا ستونی ترازبندی می شوند
آیتم ها Flex Items
تگ هایی که درون تگ نگه دارنده قرار می گیرند و فرزند مستقیم آن هستند ترازبندی روی آن ها اعمال می شود
این ویژگی فقط برای Container قابل استفاده هستند دقت کنید برای Items استفاده نکنید!
همانطور که قبل تر گفتیم فلکس باکس فقط و فقط در یک محور اعمال می شود اینکه این محور به صورت سطری یا ستونی باشد توسط این ویژگی مشخص می شود
دارای دو مقدار سطری row و ستونی column و دو مقدار دیگر که با پسوند reverse هستند همین مقادیر را در محور سطری یا ستونی به صورت عکس اعمال می کنند
به صورت پیش فرض آیتم های ما که درون نگه دارنده قرار دارند یک ردیف را تشکیل می دهند و مقدار این ویژگی no-wrap است حال زمانی که بخواهیم با کمتر شدن عرض نگه دارند از عرض یک ردیف آیتم چند ردیف زیر یکدیگر تشکیل بدهیم باید از مقدار wrap برای این ویژگی استفاده کنیم. زمانی که می خواهیم با کوچک تر شدن صفحه وب آیتم ها زیر هم قرار بگیرند تا یک صفحه وب واکنش گرا داشته باشیم کاربردی می باشد.
این ویژگی آیتم ها را درون نگه دارنده در جهت محور اصلی با توجه به فضای خالی که بین آیتم های درون نگه دارنده وجود دارد ترازبندی می کند
محور اصلی ما به ویژگی flex-direction بستگی دارد اگر جهت محور ما ستونی column باشد ویژگی justify در جهت عمودی و اگر سطری row باشد در جهت افقی اعمال می شود
مقادیری که برای تراز بندی در این ویژگی وجود دارد به شکل زیر می باشد
این ویژگی آیتم ها را درون نگه دارنده در عکس جهت اصلی ما ترازبندی می کند
کمی قبل تر گفتیم محور اصلی توسط ویژگی flex-direction تعریف می شود حال اگر محور اصلی ما سطری باشد این ویژگی ترازبندی آیتم ها را در جهت عکس محور یا همان عمودی و اگر ستونی باشد در جهت عکس محور یا افقی ترازبندی می کند.
مقادیر این ویژگی برای تراز بندی به شکل زیر می باشند.
این ویژگی فقط زمانی اجرا می شود که ویژگی flex-wrap : wrap را برای نگه دارنده خود تعریف کرده باشیم.
در جهت عکس محور اصلی اعمال می شود و زمانی که چند ردیف تشکیل می شود آیتم ها را بین فضای خالی که در نگه دارنده وجود دارد ترازبندی می کند.
این ویژگی فقط برای Item قابل استفاده هستند دقت کنید برای Container استفاده نکنید!
تگ های ما درون کد HTML با ترتیب بندی خاص خود وجود دارند این ویژگی زمانی که به یک آیتم داده می شود میتواند ترتیبی مجدد و مقدم بر کدهای HTML تعریف کند
به صورت پیش فرض مقدار این ویژگی برای تمام آیتم ها 0 صفر می باشد پس اگر به یک آیتم مقدار 1 یک بدهید به عنوان آخرین آیتم ما قرار می گیرد
زمانیکه این ویژگی برای دو آیتم یکسان می باشد تقدم با توجه به کد های HTML مشخص می شود
ویژگی grow مشخص می کند که آیتم های ما با نسبتی مشخص (طبق یک فرمول پیچیده محاسبه میشه) تا حدی که می توانند بزرگ شوند تا عرض نگه دارنده را پر کنند.
مقدار پیش فرض آن صفر می باشد
ویژگی shrink مشخص می کند تا با کوچک شدن عرض نگه دارنده زمانی که نیاز است عرض آیتم ها با یک نسبت مشخص کوچک شود تا از نگه دارنده بیرون نزنند.
اگر به یک آیتم مقدار بیشتری از این ویژگی ها بدهیم نسبت به بقیه آیتم ها به مقدار بیشتری بزرگ یا کوچک می شوند.
این ویژگی را قبل تر توضیح دادیم دقیقا کار align-items را می کند با این تفاوت که به جای همه آیتم ها فقط روی یک آیتم اعمال می شود
اگه علاقه دارید با فلکس باکس یکم بازی کنید تا بهتر مسلط بشید به وب سایت زیر سر بزنید :)
اگه علاقه داری با گرید هم آشنا بشی توی پست زیر توضیح دادم
A Complete Guide to Flexbox
