ویژگی align-self در css هم ترازی تگ html در ردیف

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی جدید align-self در زبان css توضیحاتی را ارائه نماییم. ویژگی کاربردی align-self در css در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

ویژگی align-self در css هم ترازی تگ html در ردیف - سایت آموزی

معرفی و کاربرد ویژگی جدید align-self در زبان طراحی css

در مقاله مربوط به ویژگی align-items در مورد هم ترازسازی عمودی آیتم ها یا تگ های html در یک ردیف نسبت به تگ container توضیحاتی را ارائه نمودیم. اما اگر هم ترازسازی تنها برای یک آیتم در ردیف باشد، چه کار کنیم؟

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

ویژگی جدید align-self درون تگ والد ( container ) جهت هم ترازسازی عمودی یک آیتم یا تگ html در یک ردیف نسبت به محور عمود ( Cross axis ) کاربرد دارد.

ویژگی align-self در css هم ترازی تگ html در ردیف

نکته مهم

جهت اعمال مقادیر ویژگی جدید align-self بایستی حتما برای تگ html مربوطه صفت display را برابر با مقدار flex قرار دهید.

مقادیر صفت جدید align-self در زبان طراحی css

صفت جدید align-self که در زبان طراحی CSS3 معرفی شده است، ۷ مقدار می پذیرد که عبارتند از:

  1. مقدار auto
  2. مقدار stretch
  3. مقدار center
  4. مقدار flex-start
  5. مقدار flex-end
  6. مقدار baseline
  7. مقدار initial
  8. مقدار inherit

مقدار stretch درون خاصیت align-self در زبان سی اس اس

اگر خاصیت 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 هم ترازسازی می شود.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

مقدار 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 هم ترازی تگ html در ردیف

مثال در مورد خاصیت 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 سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

ویژگی align-self در css هم ترازی تگ html در ردیف - سایت آموزی

بررسی خاصیت align-self از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی align-self در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

پشتیبانی مرورگرهای اینترنتی از خاصیت align-self در زبان طراحی css