سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته به کار با ویژگی align-items در CSS پرداختیم و یاد گرفتیم که این ویژگی تراز پیش فرض مربوط به موارد داخل flexible container را مشخص می کند.
در این جلسه شما را به آموزش کار با ویژگی align-self در CSS دعوت می کنیم.
به مثال زیر توجه نمایید. در این مثال تراز متن در وسط قرار دارد تا یکی از موارد داخل یک عنصر flexible قرار گیرد.
1 2 3 | #myBlueDiv { align-self: center; } |
ویژگی align-self در CSS وظیفه دارد که برای آیتم های موجود در یک flexible container تراز یا موقعیت قرار گیری را تعیین نماید.
ویژگی align-self باید روی مقدار ویژگی align-items قرار بگیرد.
مقدار پیش فرض | auto |
به ارث بردن | خیر |
متحرک بودن | خیر |
نسخه | CSS3 |
سینتکس JavaScript | “object.style.alignSelf=”center |
در ادامه آموزش کار با ویژگی align-self در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
عددی که در کنار -webkit- قرار گرفته است نشان می دهد که از آن نسخه به بالا باید از پیشوند -webkit- استفاده کرد.
نام ویژگی | |||||
align-self | ۲۱٫۰ | ۲۰٫۰ | ۱۲٫۱ | ۹٫۰ ۷٫۰ -webkit- | ۱۱٫۰ |
1 | align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; |
مقدار | توضیحات |
---|---|
auto | پیش فرض – این مقدار اولویت ترازبندی را از parent خودش می گیرد و اگر parent آن ترازی نداشت آنگاه از مقدار stretch استفاده خواهد کرد. |
stretch | این عنصر برای قرار دادن ظرف تنظیم می شود. |
center | این عنصر در مرکز ظرف قرار می گیرد. |
flex-start | این عنصر در ابتدای ظرف قرار می گیرد. |
flex-end | این عنصر در انتهای ظرف قرار گرفته است. |
baseline | این عنصر در پایه اصلی ظرف قرار می گیرد |
initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
inherit | ویژگی را از عنصر والدین خود به ارث می برد. |
در این جلسه به آموزش کار با ویژگی align-self در CSS پرداختیم و نحوه استفاده از آن در CSS را فراگرفتیم. در جلسه آینده به آموزش کار با ویژگی align-self در CSS می پردازیم.
با پی وی لرن همراه باشید.