ویژگی min-inline-size در CSS، حداقل اندازه افقی یا عمودی یک بلاک المان را مشخص می‌کند، که بر اساس حالت نوشتاری آن وابسته است و معادل min-height و min-width بر اساس مقدار حالت نوشتاری است.
مقادیر ممکن
ویژگی min-inline-size همان مقادیری را که در min-height و min-width قابل قبول هستند، پذیرفته می‌کند.
مقادیر ممکن عبارتند از:
<length>: تعیین اندازه حداقل به صورت مطلق.<percentage>: تعیین اندازه حداقل به عنوان درصد از ابعاد محور متناظر.auto: برای ترکیب خودکار با سایر مقادیر.min-content: اندازه حداقل محتوا.max-content: اندازه حداکثر محتوا.fit-content: اندازه متناسب با محتوا، با در نظر گرفتن اندازه‌های حداقل و حداکثر.inherit: ارث‌بری مقدار از المان والد.initial: تعیین مقدار اولیه است.
به عنوان مثال، اگر یک المان دارای حالت نوشتاری عمودی باشد، min-inline-size معادل با min-height است و اگر حالت نوشتاری افقی باشد، معادل با min-width است. این ویژگی امکان تنظیم حداقل ابعاد یک المان را برای سازگاری با محتوا یا سایر محدودیت‌ها فراهم می‌کند.
length Value
این قطعه کد CSS یک مثال از استفاده از ویژگی min-inline-size با مقدار طولی (length) را نشان می‌دهد. در این مثال، ویژگی min-inline-size: 200px به المان با کلاس “box” اعمال شده است تا حداقل عرض المان را به 200 پیکسل تنظیم کند.
<html>
<head>
<style>
.box {
background-color: greenyellow;
border: 3px solid red;
display: inline-block;
min-inline-size: 200px;
}
</style>
</head>
<body>
<p class="box">CSS min-inline-size</p>
</body>
</html>percentage Value
این قطعه کد CSS یک مثال از استفاده از ویژگی min-inline-size با مقدار درصدی (percentage) را نشان می‌دهد. در این مثال، ویژگی min-inline-size: 30% به المان با کلاس “box” اعمال شده است تا حداقل عرض المان را به 30 درصد عرض محتوا تنظیم کند.
در این کد، یک المان <p> با کلاس “box” ایجاد شده است که دارای ویژگی min-inline-size است. این ویژگی باعث تنظیم حداقل عرض المان به 30 درصد عرض محتوا می‌شود. المان دارای کلاس “box” با رنگ زمینه سبز زرد و حاشیه قرمز متمایل است. همچنین، با استفاده از display: inline-block؛ عرض المان به عرض محتوا تنظیم می‌شود، اما با وجود min-inline-size، حداقل عرض آن به 30 درصد عرض محتوا تغییر می‌کند.
<html>
<head>
<style>
.box {
background-color: greenyellow;
border: 3px solid red;
display: inline-block;
min-inline-size: 30%;
}
</style>
</head>
<body>
<p class="box">CSS min-inline-size</p>
</body>
</html>max-content Value
این قطعه کد CSS یک مثال از استفاده از ویژگی min-inline-size با مقدار max-content را نشان می‌دهد. در این مثال، ویژگی min-inline-size: max-content به المان با کلاس “box” اعمال شده است تا حداقل عرض المان را به حداکثر اندازه ممکن بر اساس محتوا تنظیم کند.
در این کد، یک المان <p> با کلاس “box” ایجاد شده است که دارای ویژگی min-inline-size است. این ویژگی باعث تنظیم حداقل عرض المان به حداکثر اندازه ممکن بر اساس محتوا می‌شود. المان دارای کلاس “box” با رنگ زمینه سبز زرد و حاشیه قرمز متمایل است. همچنین، با استفاده از display: inline-block؛ عرض المان به عرض محتوا تنظیم می‌شود، اما با وجود min-inline-size: max-content، حداقل عرض آن به حداکثر اندازه ممکن بر اساس محتوا تغییر می‌کند.
<html>
<head>
<style>
.box {
background-color: greenyellow;
border: 3px solid red;
display: inline-block;
min-inline-size: max-content;
}
</style>
</head>
<body>
<p class="box">CSS min-inline-size</p>
</body>
</html>With Vertical Text
در این قطعه کد CSS، ویژگی min-inline-size به کاربرد خود در نمایش متن به صورت عمودی با استفاده از writing-mode: vertical-rl پرداخته است.
در این کد، یک المان <div> با ویژگی‌های زیر ایجاد شده است:
- رنگ زمینه سبز زرد (background-color: greenyellow)
- حاشیه 2 پیکسلی با رنگ آبی (border: 2px solid blue)
- فاصله‌های 10 پیکسلی از اطراف المان (margin: 10px)
- حاشیه داخلی 5 پیکسلی (padding: 5px)
- عرض حداقلی در جهت افقی 150 پیکسل (min-inline-size: 150px)
- نمایش متن به صورت عمودی از راست به چپ (writing-mode: vertical-rl)
با تنظیم writing-mode به vertical-rl، متن داخل المان <div> به صورت عمودی نمایش داده می‌شود. همچنین، با استفاده از ویژگی min-inline-size، عرض حداقلی المان به 150 پیکسل تعیین شده است، اما به دلیل writing-mode، این عرض حداقل در جهت عمودی (عرض افقی در این حالت) اعمال می‌شود.
<html>
<head>
<style>
div {
background-color: greenyellow;
border: 2px solid blue;
margin: 10px;
padding: 5px;
min-inline-size: 150px;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div>
<h3>CSS min-inline-size with writing-mode: vertical-rl.</h3>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام