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

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

css
خرداد 09، 1400
card thumbnail

فلکس باکس اصطلاحا یک ماژول برای طرح بندی صفحست.

اگه بخوام به صورت دیگه ای بگم چیه باید اینطوری توضیحش بدم:

فلکس باکس برای تعیین نحوه چیدمان یا نحوه قرارگیری عناصر در یک صفحه وب به کار میره..

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

خب،شما برای طراحی یه همچین چیزی چیکار می کنید؟
قبلا از مواردی مثل float و حتی بعضی دوستان از position و.. استفاده میکردند،که مشکلات خودش رو داشت،به عنوان مثال وقتی میخواستیم یک المان تو صفحه رو به سمت چپ یا راست ببریم  از float استفاده میکردیم که به محض دادن این خصوصیت المان های دیگه جای خودشونو یجورایی گم میکردن و مجبور می شدیم که به اونها هم این خصوصیت رو بدیم یا به روشهای دیگه مشکلاتی که پیش میومد رو رفع کنیم،به هر حال از زمان اضافه شدن خصوصیت flex دیگه لازم نیست با این موارد سرو کله بزنیم و خیلی راحت میتونیم هر جوری که دوسداریم نحوه چیدمان المان های صفحه رو مشخص کنیم..

خب،برای استفاده از خصوصیت flex و موارد مرتبط با اون ما نیاز به یک Flex Container داریم یا یک نگهدارنده.
منظور از نگهدارنده چیه؟خب به تصویر زیر نگاه کنید:

همینطور که در تصویر واضحهFlex Container یجورایی Flex Itemهارو تو خودش داره نگه میداره..

(در حالت عادی اگه تگ از نوع block باشه یک سطر رو در بر میگیره یعنی آیتم ها بجای اینکه کنار هم باشن هر کدوم تو یک سطر قرار میگیرند.)

ما باید به نگهدارنده یا همون Flex Container خصوصیت display رو flex بدیم.
با دادن display:flex اتفاقی که میفته اینه که Flex Itemها میان کنار هم مثله چیزی که تو تصویر بالا هست(البته صرفا منظورم این نیست که برای کنار هم قرار دادن بیایم از فلکس باکس استفاده کنیم ولی الان میدونیم که خیلی راحت داره کار float و.. رو میکنه به علاوه مواردی که در پایین توضیح میدم).

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

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
align-self
flex-grow
flex-shrink
flex-basis
flex
order

تعدادشون تو نگاه اول زیاد به نظر میرسه ولی با خوندن توضیحات پایین و تمرین خیلی راحت یادشون میگیرید..

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

flex-direction

از flex-direction شروع میکنیم..

با استفاده از ویژگی یا خصوصیت flex-direction میتونیم نحوه نمایش flex itemهای موجود در یک flex container رو مشخص کنیم یعنی  تو محور افقی قرار بگیرند یا عمودی.

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

row
row-reverse
column
column-reverse

به صورت پیش فرض مقدار این خصوصیت row هست،یعنی باعث میشه flex itemها تو یک سطر یا تو محور افقی از چپ به راست کنار هم قرار بگیرند.

مقدار row-reverse مثله row هست با یک تفاوت،اون تفاوتم اینه که flex item ها به صورت معکوس یعنی از راست به چپ تو محور افقی کنار هم قرار می گیرند..

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

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

flex-wrap

خب flex-wrap رو باید به این صورت توضیح بدم:

فرض کنید نگهدارنده یا همون flex container یک width یا عرض مشخصی داره،اگه مجموع اندازه flex item ها بیشتر از اندازه flex container شد با این ویژگی می تونیم مشخص کنیم که flex item هایی که دیگه نمیتونن تو اون اندازه باشند به سطر بعد برند یا نه..

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

wrap
nowrap
wrap-reverse

مقدار پیش فرض این خصوصیت nowrap هست یعنی flex item ها باید تو یک خط باقی بمونن و اجازه ندارن به خط بعد منتقل بشن که باعث میشه اون flex item هایی که دیگه جا نمیشن تو flex container،بزنن بیرون از اون ناحیه که تو اینطور موارد باید به flex container خصوصیت overflow بدید تا از لحاظ ظاهری موردی پیش نیاد..
مقدار wrap این اجازه رو میده که اون flex itemهایی که دیگه نمیتونن تو اون اندازه flex container باشند به سطر بعدی منتقل بشن..
مقدار wrap-reverse هم باعث میشه که flex item هایی که در flex container جا نمیشن تو همون خط باشند و به جای اونها flex item هایی که از لحاظ ترتیب قبلشون هست به خط بعد برند.
تو تصویر زیر کاملا مشخصه که مقادیر flex-wrap دقیقا چه کاری انجام میدن..

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

flex-flow

استفاده از flex-flow یک کوتاه نویسی یا یک shorthand برای flex-direction و flex-wrap هست.
هر موقع که هم از flex-direction و هم از flex-wrap خواستید استفاده کنید از flex-flow استفاده کنید.

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

flex-flow: flex-direction flex-wrap;

 

به عنوان مثال:

flex-flow: row wrap;

 

یعنی خصوصیت flex-directionش row باشه و خصوصیت flex-wrap باشه wrap.

مابقی موارد مرتبط با فلکس رو تو پست بعد میگم.
فعلا رفقا❤️🖐️..

ارسال دیدگاه
دیدگاه ها
محمد رحیمی
محمد رحیمی
خیلی عالی دمت گرم رفیق
خرداد 19، 1400
جلال بهرامی راد
محمد رحیمی
خیلی عالی دمت گرم رفیق
جلال بهرامی راد
مخلصم❤️
خرداد 21، 1400

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