مقدار min-content در CSS یک مقدار است که می‌توان برای ویژگی‌های اندازه‌گیری استفاده کرد تا حداقل اندازه یک جعبه یا عنصر را بر اساس محتوای آن مشخص کند.
این ویژگی به ویژه نشان می‌دهد که محتوای متنی از فرصت‌های پیوستن نرم استفاده خواهد کرد، که مواد را به طول طولانی‌ترین کلمه‌اش تغییر اندازه می‌دهد. مقدار min-content بر اساس حداقل اندازه مورد نیاز توسط محتوا داخل جعبه محاسبه می‌شود.
در زیر نمونه‌ای از نحوه استفاده از min-content در خصوص ویژگی‌های مختلف اندازه‌گیری آورده شده است:
/* به عنوان یک طول استفاده می‌شود */
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;
/* استفاده شده در ردیف‌های شبکه */
grid-template-columns: 100px 2fr min-content;این مثال‌ها نشان می‌دهند که چگونه می‌توان min-content را برای تنظیم عرض و ارتفاع یک عنصر یا بلاک به حداقل مقدار ممکن بر اساس محتوا استفاده کرد.
Box Sizing
این مثال نشان می‌دهد که چگونه می‌توان از کلیدواژه min-content برای تنظیم اندازه جعبه‌ها استفاده کرد. در اینجا، یک صفحه HTML با استایل‌های CSS مشخص شده است که چند جعبه با اندازه‌های متفاوت ایجاد می‌کند، و از min-content برای تنظیم عرض جعبه‌ها استفاده می‌کند.
<html>
<head>
<style>
body {
background-color: #b9cded;
font-family: 'Helvetica Neue', Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.item {
width: min-content;
background-color: #ffffff;
padding: 5px;
margin-bottom: 20px;
border: 1px solid #e0e0e0;
box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
color: #444444;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Min-Content Example.</div>
<div class="item">Well-Crafted Min-Content Example.</div>
<div class="item">Thoughtfully Presented Min-Content Example.</div>
</div>
</body>
</html>در این مثال، تمام جعبه‌ها با کلاس .item به اندازه کافی برای نگه‌داری محتوا تنظیم شده‌اند، با استفاده از min-content برای تنظیم عرض آن‌ها. به عبارت دیگر، عرض هر جعبه به حداقل مقدار ممکن بر اساس محتوای داخلی آن تنظیم شده است.
Sizing Grid Columns
این مثال نشان می‌دهد که چگونه می‌توان از کلیدواژه min-content برای تنظیم اندازه ستون‌های گرید استفاده کرد. در اینجا، یک صفحه HTML با استایل‌های CSS مشخص شده است که از یک گرید با سه ستون استفاده می‌کند، که اندازه دومین و سومین ستون‌ها با استفاده از min-content تنظیم شده است.
<html>
<head>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
}
#container {
display: grid;
grid-template-columns: 1fr min-content min-content;
grid-gap: 15px;
box-sizing: border-box;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #82807f;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
.item {
background-color: #5f9ea0;
color: #141414;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div id="container">
<div class="item">Flexible Content Area</div>
<div class="item">Min-Content 1 Content Area</div>
<div class="item">Min-Content 2 Content Area</div>
<div class="item">Dynamic Content Area</div>
<div class="item">Min-Content 3 Content Area</div>
<div class="item">Min-Content 4 Content Area</div>
</div>
</body>
</html>در این مثال، اندازه دومین و سومین ستون‌های گرید با استفاده از min-content تنظیم شده است، بنابراین عرض آن‌ها به حداقل مقدار ممکن بر اساس محتوای داخلی آن‌ها تنظیم می‌شود، در حالی که ستون اول با استفاده از 1fr، به اندازه فضای باقی‌مانده در گرید تنظیم می‌شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام