خاصیت align-self در زبان سی اس اس
در این مقاله از پایگاه آموزش طراحی وب ( سایت آموزی ) جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی align-self در css توضیحاتی را ارائه نماییم.
ویژگی کاربردی align-self در css در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی align-self در css
در مقاله مربوط به ویژگی align-items در مورد هم ترازسازی عمودی آیتم ها یا تگ های html در یک ردیف نسبت به تگ container توضیحاتی را ارائه نمودیم.
اما اگر هم ترازسازی تنها برای یک آیتم در ردیف باشد، چه کار کنیم؟
ویژگی جدید align-self درون تگ والد ( container ) جهت هم ترازسازی عمودی یک آیتم یا تگ html در یک ردیف نسبت به محور عمود ( Cross axis ) کاربرد دارد.
نکته مهم
جهت اعمال مقادیر ویژگی align-self در css بایستی حتما برای تگ html مربوطه صفت display را برابر با مقدار flex قرار دهید.
مقادیر خاصیت align-self در زبان سی اس اس
صفت جدید align-self که در زبان طراحی CSS3 معرفی شده است، 7 مقدار می پذیرد که عبارتند از:
- مقدار auto
- مقدار stretch
- مقدار center
- مقدار flex-start
- مقدار flex-end
- مقدار baseline
- مقدار initial
- مقدار inherit
مقدار stretch درون ویژگی align-self در css
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد،
برابر با مقدار stretch تعریف کنیم، تگ فرزند مورد نظر به اندازه ای کشیده می شود،
که ارتفاع یکسانی را با تگ html پدر خود یا container ایجاد کند.
مقدار center درون ویژگی align-self در css
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد، برابر با مقدار center تعریف کنیم، تگ فرزند مورد نظر در وضعیت عمود و وسط چین نسبت به تگ html پدر خود یا container هم ترازسازی می شود.
مقدار flex-start درون خاصیت align-self در زبان css
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد، برابر با مقدار flex-start تعریف کنیم، تگ فرزند مورد نظر در وضعیت عمود و در ابتدای تگ html پدر خود یا container هم ترازسازی می شود.
مقدار flex-end درون خاصیت align-self در زبان سی اس اس
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد، برابر با مقدار flex-end تعریف کنیم، تگ فرزند مورد نظر در وضعیت عمود و در انتهای تگ html پدر خود یا container هم ترازسازی می شود.
مقدار baseline درون ویژگی align-self در css
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد، برابر با مقدار baseline تعریف کنیم، تگ فرزند مورد نظر در وضعیت عمود و در خط اول تگ html پدر خود یا container هم ترازسازی می شود.
مقدار initial درون خاصیت align-self در زبان css
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد، برابر با مقدار initial تعریف کنیم، تگ فرزند مورد نظر در وضعیت عمود و در موقعیت پیش فرض ( تنطیمات CSS Specification ) هم ترازسازی می شود.
مقدار inherit درون خاصیت align-self در زبان سی اس اس
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد، برابر با مقدار inherit تعریف کنیم، تگ فرزند مورد نظر در وضعیت عمود، موقعیت تگ html پدر خود یا container ، را به ارث برده و براساس آن هم ترازسازی می شود.
مقدار auto درون ویژگی align-self در css
اگر خاصیت align-self را برای یک آیتم یا تگ فرزند html ، که داخل تگ نگهدارنده ( container ) می باشد، برابر با مقدار auto تعریف کنیم، تگ فرزند یا آیتم مورد نظر در وضعیت عمود ، موقعیت تگ html پدر خود یا container ، را به ارث برده و در صورت نداشتن والد پدر کشیده شده و براساس آن هم ترازسازی می شود.
مثال در مورد خاصیت align-self در زبان طراحی css
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 220px;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
#myBlueDiv {
-webkit-align-self: center; /* Safari 7.0+ */
align-self: center;
}
</style>
</head>
<body>
<div id=”main”>
<div style=”background-color:coral;”>RED</div>
<div style=”background-color:lightblue;” id=”myBlueDiv”>BLUE</div>
<div style=”background-color:lightgreen;”>Green div with more content.</div>
</div>
<p><b>Note:</b> The align-self property overrides the container’s align-items property.</p>
<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-self property.</p>
<p><b>Note:</b> Safari 7.0 to 9.0 supports an alternative, the -webkit-align-self property.</p>
</body>
</html>
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
بررسی خاصیت align-self از نظر نسخه زبان طراحی سی اس اس
ویژگی کاربردی align-self در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
پشتیبانی مرورگرهای اینترنتی از خاصیت align-self در زبان طراحی css
| خاصیت css |  |  |  |  |  |
| align-self | 21.0 | 11.0 | 20.0 | 9.0 | 12.1 |
دیدگاهتان را بنویسید