• خانه
  • css
  • راهنمای کامل FlexBox(بخش دوم)

راهنمای کامل FlexBox(بخش دوم)

css
خرداد 15، 1400
card thumbnail

خوبه که قبل از توضیح دادن بقیه موارد مرتبط با فلکس با یه مفهوم اصلی آشناتون کنم،تصویر پایین رو نگاه کنید:

Main axis یا محور اصلی و Cross axis یا محور عرضی رو تو تصویر بالا ببینید،Main axis که همون جهت قرارگیری flex item ها هست،که با همون flex-direction که تو پست قبل دربارش گفتم تعیین میشه(اینکه flex itemها تو محور افقی باشن یا عمودی).

تو تصویر پایین میتونید ببینید که جهت Main axis و Cross axis با مقداری که به خصوصیت flex-direction میدید چجوری تغییر میکنه.

از این جهت خیلی مهمه چون مواردی که برای ترازبندی flex item ها میخوایم پایین بررسیشون کنیم به مقداری که به flex-direction داده شده و جهت Main axis و Cross axis بستگی داره.

*******************

justify-content

با استفاده از این خصوصیت شما میتونید flex item هارو نسبت به "محور اصلی یا Main Axis" هم تراز کنید.

این خصوصیت مقدارش میتونه یکی از این 5تا باشه:

flex-start
flex-end
center
space-between
space-around

خب،به صورت پیش فرض مقدارش flex-start هست،که باعث میشه flex item ها در ابتدای flex container قرار بگیرند.
مقدار بعدی flex-end هست که باعث میشه flex itemها در انتهای flex container قرار بگیرند.
مقدار center میاد flex item هارو در وسط flex container قرار میده.
مقدار space-between باعث میشه یک فاصله مشخصی "بین" flex itemهای موجود در flex container بیفته.
مقدار space-around باعث میشه یک فاصله مشخصی "اطراف" flex itemهای موجود در flex container بیفته.
شاید تفاوت space-between و space-around رو متوجه نشده باشید که باید بگم space-around میاد قبل و بعد هر flex-item یه فاصله مشخصی ایجاد میکنه ولی تو space-between اولین flex item و آخرین flex item موجود در flex container "قبلشون" فاصله ای نمیفته و فقط بعدشون فاصله میفته.
تو تصویر زیر کاملا مشخصه که مقادیر justify-content دقیقا چه کاری انجام میدن..

*******************

align-items

با استفاده از این خصوصیت شما میتونید flex item هارو نسبت به "محور عرضی یا Cross Axis" هم تراز کنید.
این خصوصیت مقدارش میتونه یکی از این 5تا باشه:

stretch
flex-start
flex-end
center
baseline

مقدار پیش فرض این خصوصیت stretch هست.نکته ای که باید بهش توجه کنید اینه که اگه واسه flex itemها عرض و ارتفاعی مشخص نکرده باشید اعمال میشه!
که اگه flex-direction که به flex container دادید row یا row-reverse باشه و همینطور برای flex itemها ارتفاعی مشخص نکرده باشید این مقدار stretch باعث میشه flex item ها کل ارتفاع رو به خودشون اختصاص بدن،
ولی اگه flex-directionی که به flex container دادید column یا column-reverse باشه و همینطور برای flex itemها عرضی مشخص نکرده باشید این مقدار stretch باعث میشه flex itemها کل عرض رو به خودشون اختصاص بدن.
مقدار flex-start باعث میشه flex item ها در در ابتدای flex container قرار بگیرند و flex-end باعث میشه flex item ها در انتهای flex container قرار بگیرند.
مقدار center میاد flex item ها رو در وسط محور عرضی یا Cross Axis قرار میده.
مقدار baseline میاد flex item ها رو نسبت به یک خط در محور Cross Axis قرار میده،که این خط ابتدای متن های داخل flex item ها هست.
تو تصویر پایین میتونید کاملا درک کنید که مقادیر مختلف align-items چه کاری انجام میدن.

*******************

align-self

ویژگی align-items که در بالا گفتم میاد رو همه flex item ها تو flex container تاثیر میذاره،حالا ممکنه شما بخوای فقط یک flex item مشخصی رو تو flex container در محور  Cross Axis تنظیم کنی،یعنی مثلا flex item دومی بیاد وسط محور Cross Axis و مابقی همونجای خودشون بمونند،اینجاست که شما باید از خصوصیت align-self استفاده کنی.این خصوصیت رو باید به خود flex item مورد نظر بدی.مقادیری که میگیره هم همون مقادیری هستند که به align-items میتونیم بدیم.
تو تصویر پایین مشخصه که چه جایی کاربرد داره.

*******************

align-content

این خصوصیت زمانی کاربرد داره که ما تو flex container چند ردیف از  flex item ها رو داشته باشیم.وگرنه اگه فقط یک ردیف باشه هیچ تاثیری نداره.کاربردشم مشابه align-items هست.یعنی میاد تو محور Cross Axis طبق مقادیری که میگیره flex item هارو قرار میده..

این خصوصیت مقدارش میتونه یکی از این 6تا باشه:

stretch
flex-start
flex-end
center
space-between
space-around

فکر کنم دیگه توضیحی نیاز نباشه بدم،مقادیر تکراری،و با همون عملکرد،البته عملکردشون نسبت به کاری که این خصوصیت انجام میده.

تو تصویر پایین مشخصه:

*******************

flex-basis

این خصوصیت با توجه به flex-direction تاثیر خودشو میذاره،و برای flex item ها باید به کار بره.مقدارش یک اندازه پایه برای یک یا تعدادی از flex itemهاست.اگه flex-direction مقدارش row و row-reverce باشه به عرض flex item ها داده میشه،ولی اگه flex-direction مقدارش column یا column-reverse باشه به ارتفاع flex item ها داده میشه.

*******************

flex-grow

با این خصوصیت میتونیم مشخص کنیم که هر flex item در flex container چقدر میتونه از فضایی که flex container داره رو بگیره.به صورت پیش فرض به یک اندازه flex item ها از اندازه flex container سهم میبرند.
مثلا میتونیم مشخص کنیم یک آیتم دو برابر سهم ببره.
تو تصویر پایین مشخصه که کاربردش چیه:

*******************

flex-shrink

این خصوصیت میتونم بگم برعکس flex-grow هست.یعنی مثلا یک flex item نسبت به بقیه flex item ها کمتر سهم ببره از فضایی که flex item ها میتونند تو flex container داشته باشند.

برای درک بهتر  flex-grow ،flex-basis و flex-shrink حتما به این آدرسی که پایین میذارم یه سر بزنید:

www.madebymike.com.au/demos/flexbox-tester

*******************

flex

استفاده از flex یک کوتاه نویسی یا یک shorthand برای flex-basis و flex-grow و flex-shrink هست.
هر موقع که همزمان خواستید این سه مورد رو مقداردهی کنید از flex استفاده کنید.

به این صورت که اولین مقدار این خصوصیت flex-grow هست،دومین مقدار flex-shrink و به عنوان آخرین مقدار flex-basis رو باید بدید.

یعنی به این صورت:

flex: flex-grow|flex-shrink|flex-basis;

 

*******************

order

یه خصوصیت خیلی باحال که باهاش میتونیم ترتیب قرارگیری flex item هارو بدون تغییر در کدهای html مشخص کنیم.
یعنی مثلا flex item اولی بره جای flex item چهارمی و..

تصویر پایین نشون میده که چه کاربردی داره:

خب فلکس باکس همین بود که تو این دو تا پست گفتمش،به این نکته توجه کنید که  flex-shrink،flex-grow،flex-basis،flex و order و align-self مواردی هستند که باید به flex item ها بدید و مابقی فقط برای flex container کاربرد دارند..

فلکس چیز پیچیده ای نداره و فقط باید تمرینش کنید و ازش تو طراحی قالب استفاده کنید چون تو ریسپانسیوکردن صفحات به شدت میتونه کمکتون کنه.

موفق باشید ❤️🖐️

ارسال دیدگاه
دیدگاه ها

موردی یافت نشد!

اشتراک گذاری در