آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 35) : flexbox - قسمت 3

در این جلسه میخوام مباحث مربوط به flexbox رو به پایان برسونم و دو ویژگی باقیمانده رو برای شما توضیح بدم.

ویژگی چهارم : Align items

اگر شما ویژگی justify-content رو به خوبی متوجه شده باشید، با این ویژگی هم مشکلی نخواهید داشت و به راحتی اون رو متوجه میشید. اگر یادتون باشه justify-content، المنتها رو بر اساس محور اصلی یا Main axis ترازبندی میکرد. اما ویژگی align-items، المنتها رو بر اساس Cross axis ترازبندی میکنه.

برای فهم بهتر، ویژگی flex-direction رو برابر با مقدار پیش فرض خودش که row هست، قرار میدیم و در نتیجه محورهای اصلی و متقاطع بصورت تصویر بالا خواهند بود. مقادیری که میتونین برای ویژگی align-items قرار بدین بصورت زیر هستن:

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

عملکرد سه مقدار اول، دقیقا همانند سه مقداری هست که درون ویژگی justify-content هم قرار دارن و در مورد اونا توضیح داده شده. پس شما با فهم این سه مورد نباید مشکلی داشته باشید. دو مقدار نهایی تفاوت دارن و در اینجا اونا رو برای شما توضیح میدیم.

اگر مقدار این ویژگی رو برابر با stretch قرار بدین، باعث میشه که المنتهای شما، کل فضای محور متقاطع یا Cross axis رو اشغال کنن. اگر مقدار رو برابر با baseline قرار بدین، موقعیت پایین پاراگرافهای درون المنتها، با هم تراز خواهند شد. تصویر زیر رو برای فهم بیشتر این 5 مقدار مشاهده کنید:

همونطور که میبینید با این مقادیر، موقعیت المنتها در جهت cross axis تغییر میکنه.

برای نمایش دادن و بهتر متوجه شدن Main axis و Cross axis، دو ویژگی justify-content و align-items رو بصورت همزمان مورد استفاده قرار میدیم و هر دوی اونا رو برابر با center قرار میدیم و ویژگی flex-direction رو بین row و column تغییر میدیم. خروجی بصورت زیر خواهد شد:

زمانی که از row استفاده میکنیم، المنتها در طول محور افقی اصلی قرار میگیرن و زمانی که از column استفاده میکنیم، المنتها در طول محور عمودی اصلی قرار میگیرن.

ویژگی پنجم : Align self

این ویژگی به شما این قابلیت رو میده که موقعیت و ترازبندی یک المنت رو بصورت جداگانه مشخص کنید. این مورد بصورت ساده ویژگی align-items رو برای المنت مورد نظر، بازنویسی میکنه. همه مقادیری که میتونین برای این ویژگی استفاده کنید، شبیه به ویژگی align-items هست. مقدار پیش فرض auto هست که در این حالت موقعیت از ویژگی align-items تبعیت میکند. کد زیر رو در نظر بگیرید:

با کد بالا شما کاری کردید که فقط مربع اول در وسط قرار بگیره و بقیه موارد در ابتدا قرار میگیرن. حالا یک مثال برای این مورد میزنیم تا بهتر با اون آشنا بشید. فرض کنید که شما 4 مربع دارید و برای 2 مورد از اونا ویژگی align-self رو قرار میدیم و برای بقیه موارد ویژگی های align-items: center و flex-direction: row رو قرار میدیم. با اینکار خروجی بصورت زیر خواهد شد:

همونطور که میبینید دو المنت سمت راست ثابت در مرکز قرار گرفتن و دو مورد سمت چپ با استفاده از ویژگی align-self تغییر موقعیت میدن.

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

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source