یادگیری سریع Flex

یادگیری سریع Flex

Flex یا FlexBox به معنای Flexible Box یا جعبه منعطفی است که می توانیم از آن برای نمایش محتوا به صورت منعطف استفاده کنیم، در تعریف دیگه می تونیم بگیم جایگزین مناسبی برای دستور float هست که مشکلات زیادی رو در چیدمان برای طراحان به وجود می آورد.

یادگیری سریع Flex

نکته: اگر عنصر یک آیتم انعطاف پذیر نباشد، خاصیت flex هیچ تاثیری روی اون آیتم ندارد.

بریم سراغ کدینگ تا بهتر متوجه کارکرد Flex بشیم، در مثال زیر سه box ایجاد شده که توسط ویژگی flex همگی در کنار هم و در مرکز div قرار گرفتند.

مثالی از ویژگی Flex

ویژگی “justify-content” پنج مقدار اصلی می گیرد:

center که هماند مثال قبل محتوا را در مرکز div متمرکز می کند.
space-between، بین div ها یا المان های ایجاد شده در flex فاصله قرار می دهد.
space-around، عملکردی مشابه space-between داره با این تفاوت که در ابتدا و انتهای المان های موجود در div مربوط به flex فاصله یا padding ایجاد می کنه که در ادامه مثالش رو میبینیم.
start، نمایش محتوا در ابتدای خط شروع المان ها.
end، نمایش محتوا در انتهای خط شروع المان ها.

نمایش المان ها یا box ها در حالت space-bwtween در flex:

نمایش المان ها یا box ها در حالت space-bwtween در flex

نمایش المان ها یا box ها در حالت space-around در flex:

نمایش المان ها یا box ها در حالت space-around در flex

حالا فرض کنید می خواهیم استایل box سوم را تغییر دهیم، برای اینکار می تونیم کلاس مجزایی تعریف کنیم اما می توانیم از دستور “nth-of-type” به شکل زیر استفاده کنیم:

استفاده از دستور nth-of-type

مثالی کاملتر از “nth-of-type” برای تغییر موقعیت المان ها و همچنین استایل آنها:

مثالی از دستور nth-of-type

ویژگی flex-direction

به صورت پیشفرض نمایش المان ها در flex به صورت ردیفی یا row می باشد، اما می تونیم اون رو به حالت ستونی در بیاریم، به مثال زیر توجه کنید:

ویژگی flex-direction

ویژگی flex رو می تونیم به فرزندان یا در این مثال به box ها هم بدیم، مثلا اگر محتوایی درون باکس ها داشته باشیم که بخوایم کنار هم قرار بگیرند(قرارگرفتن یک آیکن در کنار متن). فرض کنید می خوایم متن درون box ها رو وسط چین کنیم، برای این کار همانند تصویر زیر کدینگ باکس ها رو می نویسیم:

وسط چین کردن محتوا در flex

ویژگی flex-wrap

اگر تعداد المان های ما در حالت نمایش flex زیاد باشد المان ها اسکرول خواهند شد و به صورت اتوماتیک به خط بعد منتقل نمیشن که این حالت طرح ما رو از نظر رسپانسیو دچار مشکل میکنه.

ویژگی flex-wrap

برای اینکه این مشکل رو از بین ببریم و در صورتی که هر المان در انتهای خط فضای کافی نداشت رو به خط بعد انتقال بدیم از ویژگی “flex-warp” به شکل زیر استفاده می کنیم.

مثالی از کاربرد “flex-wrap”

ویژگی flex-basis

این ویژگی همان کار دستور “width” رو انجام میده، با استفاده از property می تونیم برای المان هایی که در حالت flex قرار گرفتند اندازه های مختلف تعریف کنیم.

مثالی از ویژگی flex-basis

ویژگی flex-grow

این ویژگی همانند flex-basis عمل می کنه با این تفاوت که مقدار رشد یا بزرگ شدن یک آیتم رو نسبت به دیگری مشخص میکنه، همچنین نسبت به تغییر مقدار رزولوشن حساسه و خودش رو به همون اندازه که براش مشخص کردیم کوچیک و بزرگ میکنه، بدین شکل مشکل رسپانسیو نخواهیم داشت. می تونیم به جای flex-basis در کلاس box از flex-grow استفاده کنیم، در این صوت همه باکس ها علاوه بر داشتن سایز یکسان، رسپانسیو نیز خواهند شد.

می تونیم به جای flex-grow تنها بنویسیم flex:

flex-grow:1 or flex:1