در Flexbox، “کانتینر فلکس” (Flex Container) نقش والد را ایفا میکند و مسئولیت چیدمان و توزیع فضا بین “فلکس آیتمها” (Flex Items) که همان فرزندان مستقیم آن هستند را بر عهده دارد. با استفاده از خصوصیات مختلف روی کانتینر فلکس، میتوانیم رفتار کلی چیدمان را کنترل کنیم.
۱. فعالسازی Flexbox: display
اولین قدم برای استفاده از Flexbox، تبدیل یک المان به کانتینر فلکس است. این کار با استفاده از خصوصیت display انجام میشود:
display: flex;: المان مورد نظر به یک بلوک (block-level) تبدیل شده و آیتمهای فرزندش به صورت فلکس در یک ردیف (پیشفرض) چیده میشوند. این رایجترین حالت استفاده است.display: inline-flex;: المان مورد نظر به صورت درونخطی (inline-level) رفتار میکند، اما آیتمهای فرزندش همچنان به عنوان فلکس آیتم مدیریت میشوند. این گزینه زمانی مفید است که میخواهید یک عنصر درونخطی، مانند یک دکمه یا یک نوار وضعیت، خود یک کانتینر فلکس باشد.
۲. تعیین جهت محور اصلی: flex-direction
این خصوصیت تعیین میکند که آیتمهای فلکس در چه جهتی چیده شوند (محور اصلی):
row(پیشفرض): آیتمها در یک ردیف، از چپ به راست (یا راست به چپ بسته به زبان) قرار میگیرند.row-reverse: آیتمها در یک ردیف، اما از راست به چپ (یا چپ به راست) قرار میگیرند.column: آیتمها در یک ستون، از بالا به پایین قرار میگیرند. در این حالت، محور اصلی عمودی میشود.column-reverse: آیتمها در یک ستون، اما از پایین به بالا قرار میگیرند.
۳. کنترل پیچش خطوط: flex-wrap
به طور پیشفرض، تمام آیتمها سعی میکنند در یک خط (ردیف یا ستون) جای بگیرند و اگر فضای کافی نباشد، فشرده میشوند. flex-wrap این رفتار را کنترل میکند:
nowrap(پیشفرض): آیتمها در صورت عدم وجود فضا، فشرده میشوند و در یک خط باقی میمانند.wrap: اگر آیتمها در یک خط جا نشوند، به خطوط یا ستونهای بعدی منتقل میشوند.wrap-reverse: مانندwrap، اما خطوط یا ستونهای اضافی به صورت معکوس (از پایین به بالا یا از راست به چپ) قرار میگیرند.
۴. توزیع فضا در محور اصلی: justify-content
این خصوصیت تعیین میکند که چگونه فضای خالی در طول محور اصلی (که توسط flex-direction تعیین میشود) بین آیتمها و در لبههای کانتینر توزیع شود:
flex-start(پیشفرض): تمام آیتمها در ابتدای محور اصلی جمع میشوند.flex-end: تمام آیتمها در انتهای محور اصلی جمع میشوند.center: تمام آیتمها در مرکز محور اصلی قرار میگیرند.space-between: اولین آیتم در ابتدای محور، آخرین آیتم در انتهای آن قرار میگیرد و فضای خالی باقیمانده به طور مساوی بین آیتمها توزیع میشود.space-around: فضای خالی به طور مساوی در دو طرف هر آیتم توزیع میشود. این یعنی فاصله بین دو آیتم دو برابر فاصله بین آیتم و لبه کانتینر خواهد بود.space-evenly: فضای خالی به طور کاملاً مساوی بین تمام آیتمها و همچنین بین آیتمها و لبههای کانتینر توزیع میشود.
۵. تراز کردن آیتمها در محور متقاطع: align-items
این خصوصیت نحوه تراز کردن آیتمها را در طول محور متقاطع (عمود بر محور اصلی) کنترل میکند:
stretch(پیشفرض): آیتمها تا جایی که امکان دارد کشیده میشوند تا تمام فضای موجود در محور متقاطع را پر کنند (این اتفاق زمانی میافتد که آیتمها ارتفاع یا عرض مشخصی نداشته باشند).flex-start: آیتمها در ابتدای محور متقاطع قرار میگیرند.flex-end: آیتمها در انتهای محور متقاطع قرار میگیرند.center: آیتمها در مرکز محور متقاطع قرار میگیرند.baseline: آیتمها بر اساس خط مبنای متن خود تراز میشوند. این برای تراز کردن متنهای با اندازههای فونت متفاوت بسیار مفید است.
۶. کنترل فضای بین خطوط: align-content
این خصوصیت زمانی کاربرد دارد که از flex-wrap: wrap; استفاده کردهایم و بیش از یک خط (ردیف یا ستون) آیتم داریم. align-content نحوه توزیع فضای خالی بین این خطوط را کنترل میکند (مشابه justify-content اما برای محور متقاطع و در سطح خطوط):
stretch(پیشفرض): خطوط فضا را پر میکنند.flex-start: خطوط در ابتدای محور متقاطع جمع میشوند.flex-end: خطوط در انتهای محور متقاطع جمع میشوند.center: خطوط در مرکز محور متقاطع قرار میگیرند.space-between: اولین خط در ابتدا، آخرین خط در انتها و فضای خالی بین خطوط توزیع میشود.space-around: فضای خالی در دو طرف هر خط توزیع میشود.
با تسلط بر این خصوصیات مربوط به کانتینر فلکس، میتوانیم چیدمانهای بسیار منعطف و دقیقی را در وبسایتهای خود پیادهسازی کنیم.
کلیدواژه ها : Flexbox Container-CSS Layout-display flex-flex-direction-flex-wrap-justify-content-align-items-align-content-
