سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در نخستین جلسه از این دوره آموزشی قرار است به سراغ آموزش کار با ویژگی align-content در CSS برویم و شما را با این ویژگی CSS آشنا کنیم.
آموزش کار با ویژگی align-content در CSS
به مثال زیر توجه نمایید. در این مثال از ویژگی align-content در CSS استفاده شده است. ویژگی align-content خطوط را به مرکز flex container منتقل کرده است.
مثال :
| div { width: 70px; height: 300px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; align-content: center; } |
تعریف و کاربرد
خاصیت ویژگی align-content این است که رفتار flex-wrap را تغییر می دهد و موقعیت قرار گیری یا تراز خطوط یک flex را تعیین می نماید. ویژگی align-content شبیه به آیتم های تراز است، اما به جای تراز کردن موارد فلکس، خطوط فلکس را تراز می کند.
نکات و توصیه ها
نکته
برای این ویژگی باید چندین سطر از آیتم ها وجود داشته باشد تا این ویژگی بتواند تاثیری ایجاد کند.
توصیه
برای تراز کردن موارد در محور اصلی (به صورت افقی) از خاصیت justify-content استفاده کنید.
| مقدار پیش فرض | stretch |
| به ارث بردن | خیر |
| متحرک بودن | خیر |
| نسخه | CSS3 |
| سینتکس JavaScript | “object.style.alignContent=”center |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی align-content در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
عددی که در کنار -webkit- قرار گرفته است نشان می دهد که از آن نسخه به بالا باید از پیشوند -webkit- استفاده کرد.
| نام ویژگی |  |  |  |  |  |
| align-content | ۲۱٫۰ | ۲۸٫۰ | ۱۲٫۱ | ۹٫۰
۷٫۰ -webkit- | ۱۱٫۰ |
سینتکس CSS
مثال :
| align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
|---|
| stretch | مقدار پیش فرض – در آن خطوط کش می آیند و فضای باقیمانده را اشغال می کنند |
| center | خطوط ظرف فلکس را در وسط فلکس قرار می دهد. |
| flex-start | خطوط ظرف فلکس را در قسمت شروع فلکس می گذارد. |
| flex-end | خطوط ظرف فلکس را در قسمت پایانی فلکس می گذارد. |
| space-between | خطوط به طور مساوی در ظرف فلکس توزیع می شوند. |
| space-around | خطوط به طور مساوی در ظرف فلكسی توزیع می شوند كه دارای فضاهای نیم سایز در هر دو طرف هستند. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | ویژگی را از عنصر والدین خود به ارث می برد. |
کلام آخر
در این به آموزش کار با ویژگی align-content در CSS پرداختیم و با نحوه استفاده از آن آشنا شدیم. در جلسه آینده به آموزش کار با ویژگی align-items در CSS می پردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
