این آموزش در تاریخ ۱۴۰۰/۱۰/۲۶ آپدیت شده است.
آموزش ویژگی align-content در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی align-content در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی align-content در CSS
ویژگی align-content
ویژگی ای است که تحت تاثیر ویژگی flex-wrap قرار میگیرد، و با استفاده از آن میتوان تراز عمودی سطرهایی از آیتم های یک فلکس باکس را مشخص نمود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی align-content
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از مقدار center
1 2 3 4 5 |
.MyContainer{ height:300px; flex-wrap: wrap; align-content: center; } |
مثال شماره ۲ : استفاده از مقدار flex-end
1 2 3 4 5 |
.MyContainer{ height:300px; flex-wrap: wrap; align-content: flex-end; } |
Free-Learn
جدول مشخصات ویژگی align-content در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | stretch |
---|---|
قابل ارث بری | ندارد | اطلاعات بیشتر |
قابل متحرک سازی | ندارد | اطلاعات بیشتر |
نسخه | CSS3 |
نحوه استفاده در جاوااسکریپت | object.style.alignContent=”center”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی align-content
در CSS پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
align-content | ۲۹ | ۲۸ | ۱۲٫۱ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
1 |
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی align-content در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
stretch | مقدار پیش فرض – سعی میکند تمام فضای فلکس را بپوشاند |
center | سطرهارو در وسط ظرف قرار میدهد |
flex-start | سطرهارو در قسمت شروع ظرف قرار میدهد |
flex-end | سطرهارو در قسمت پایانی ظرف قرار میدهد |
space-between | یک فضای خالی به مقدار مساوی بین سطرها ایجاد میکند |
space-around | یک فضای خالی به مقدار مساوی در اطراف سطرها ایجاد میکند |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- این ویژگی موقعی عمل میکنه که آیتم های فلکس چندین سطر باشند، حال برای اینکه آیتم ها به چندین سطر شکسته شوند باید از ویژگی flex-wrap استفاده کرد.
- با استفاده از ویژگی justify-content میتوان آیتم های یک فلکس باکس را بصورت افقی ترازبندی کرد.