CSS – قرار دادن محتوا (Place Content)
ویژگی CSS place-content یک ویژگی اختصاری است که محتوای یک عنصر را همزمان در هر دو محور بلوک (ستون) و شطرنجی (ردیف) ترتیب میدهد. این ویژگی برای تنظیم همزمان ویژگیهای align-content و justify-content در یک دستور استفاده میشود.
بطور خاص، این ویژگی یک مختصر برای ویژگیهای CSS زیر است:
- align-content
- justify-content
ویژگی align-content برای تنظیم ترتیب عناصر در محور بلوک (ستون) مورد استفاده قرار میگیرد. این ویژگی معمولاً بر روی محتوایی که در یک محفظه بلوکی (مانند یک flexbox یا grid container) قرار دارد، اعمال میشود و تأثیری در ترتیب عناصر در عمود (محور بلوک) دارد.
ویژگی justify-content برای تنظیم ترتیب عناصر در محور شطرنجی (ردیف) استفاده میشود. این ویژگی معمولاً بر روی محتوایی که در یک محفظه شطرنجی (مانند یک flexbox یا grid container) قرار دارد، اعمال میشود و تأثیری در ترتیب عناصر در افقی (محور شطرنجی) دارد.
استفاده از ویژگی place-content کاربردی است زیرا به شما امکان میدهد همزمان ترتیب محتوا در هر دو محور بلوک و شطرنجی را تنظیم کنید، به جای این که بخواهید از دو ویژگی جداگانه استفاده کنید و کدهای بیشتری را بنویسید.
این ویژگی شامل انواع مقادیری است که برای تنظیم ترتیب و موقعیت محتوا در محورهای مختلف درون یک کانتینر استفاده میشود. این مقادیر شامل موارد زیر میباشد:
- start: عناصر به یکدیگر در حالت شروع کانتینر در محور مربوطه متمایل میشوند.
- end: عناصر به یکدیگر در حالت پایان کانتینر در محور مربوطه متمایل میشوند.
- flex-start: عناصر را در ابتدای کانتینر flex قرار میدهد.
- flex-end: عناصر را در انتهای کانتینر flex قرار میدهد.
- center: عناصر را در مرکز کانتینر flex قرار میدهد.
- left: عناصر را در سمت چپ کانتینر ترتیب میدهد.
- right: عناصر را در سمت راست کانتینر ترتیب میدهد.
- space-between: عناصر درون کانتینر ترتیب میشوند و با فاصله یکسان بین عناصر مجاور، اما با تراز برای اولین و آخرین عناصر.
- baseline, first baseline, last baseline: این مقادیر برای تعیین ترتیب عناصر بر اساس خط پایه اول یا آخر استفاده میشود.
- space-around: عناصر درون کانتینر ترتیب میشوند و با فاصله یکسان بین عناصر مجاور و همچنین از هر دو طرف محور اصلی.
- space-evenly: عناصر درون کانتینر ترتیب میشوند و با فاصله یکسان بین عناصر مجاور و همچنین در ابتدا و انتهای کانتینر.
- stretch: اگر اندازه کلی عناصر در محور اصلی کوچکتر از کانتینر باشد، عناصر با اندازه خودکار خود را افزایش میدهند تا کانتینر را پر کنند.
- safe: اگر عنصر از کانتینر خارج شود و اطلاعاتی از دست رود، ترتیب بر اساس مقدار start قرار میگیرد.
- unsafe: حتی اگر عنصر از کانتینر خارج شود و اطلاعاتی از دست رود، مقدار ترتیب داده شده را اعمال میکند.
center start Value
این کد نمونه، ویژگی place-content: center start
را در عمل نشان میدهد که عناصر flex را در افقی به سمت مرکز و در عمودی به سمت بالای کانتینر ترتیب میدهد.
در این کد:
.flex-container
تعریف شده است که یک کانتینر flex است که در آن عناصر flex قرار میگیرند.place-content: center start;
تنظیم شده است که عناصر flex را در افقی به سمت مرکز و در عمودی به سمت بالای کانتینر ترتیب دهد.- عناصر داخل
.flex-container
با استفاده ازdiv
ها تعریف شدهاند که از رنگ زردسبز هستند و ارتفاع و عرض ثابتی دارند.
در نتیجه، عناصر flex در افقی به سمت مرکز و در عمودی به سمت بالای کانتینر ترتیب داده میشوند، همانطور که با تنظیمات CSS مشخص شده است.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: center start; /* اینجا place-content را تنظیم میکنیم */
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
start center Value
این کد نمونه، ویژگی place-content: start center
را در عمل نشان میدهد که عناصر flex را در افقی به سمت چپ کانتینر و در عمودی به وسط کانتینر ترتیب میدهد.
در این کد:
.flex-container
تعریف شده است که یک کانتینر flex است که در آن عناصر flex قرار میگیرند.place-content: start center;
تنظیم شده است که عناصر flex را در افقی به سمت چپ کانتینر و در عمودی به وسط کانتینر ترتیب دهد.- عناصر داخل
.flex-container
با استفاده ازdiv
ها تعریف شدهاند که از رنگ زردسبز هستند و ارتفاع و عرض ثابتی دارند.
در نتیجه، عناصر flex در افقی به سمت چپ کانتینر و در عمودی به وسط کانتینر ترتیب داده میشوند، همانطور که با تنظیمات CSS مشخص شده است.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: start center; /* اینجا place-content را تنظیم میکنیم */
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
end right Value
این کد نمونه، ویژگی place-content: end right
را نشان میدهد که عناصر flex را افقی به سمت راست و عمودی به سمت پایین کانتینر ترتیب میدهد.
در این کد:
.flex-container
تعریف شده است که یک کانتینر flex است که در آن عناصر flex قرار میگیرند.place-content: end right;
تنظیم شده است که عناصر flex را افقی به سمت راست و عمودی به سمت پایین کانتینر ترتیب دهد.- عناصر داخل
.flex-container
با استفاده ازdiv
ها تعریف شدهاند که از رنگ زردسبز هستند و ارتفاع و عرض ثابتی دارند.
در نتیجه، عناصر flex در افقی به سمت راست و عمودی به سمت پایین کانتینر ترتیب داده میشوند، همانطور که با تنظیمات CSS مشخص شده است.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: end right; /* اینجا place-content را تنظیم میکنیم */
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
flex-start center Value
این نمونه کد، ویژگی place-content: flex-start center
را نشان میدهد که عناصر flex را افقی به سمت لبه چپ و عمودی به سمت مرکز کانتینر مرتب میکند.
در این کد:
.flex-container
تعریف شده است که یک کانتینر flex است که در آن عناصر flex قرار میگیرند.place-content: flex-start center;
تنظیم شده است که عناصر flex را افقی به سمت لبه چپ و عمودی به سمت مرکز کانتینر مرتب کند.- عناصر داخل
.flex-container
با استفاده ازdiv
ها تعریف شدهاند که از رنگ زردسبز هستند و ارتفاع و عرض ثابتی دارند.
بنابراین، عناصر flex در افقی به سمت لبه چپ و عمودی به سمت مرکز کانتینر مرتب میشوند، همانطور که با تنظیمات CSS مشخص شده است.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: flex-start center; /* اینجا place-content را تنظیم میکنیم */
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
flex-end center Value
این کد نمونه، ویژگی place-content: flex-end center
را نشان میدهد که عناصر flex را افقی به سمت انتهای راست و عمودی به سمت مرکز کانتینر ترتیب میدهد.
در این کد:
.flex-container
تعریف شده است که یک کانتینر flex است که در آن عناصر flex قرار میگیرند.place-content: flex-end center;
تنظیم شده است که عناصر flex را افقی به سمت انتهای راست و عمودی به سمت مرکز کانتینر ترتیب دهد.- عناصر داخل
.flex-container
با استفاده ازdiv
ها تعریف شدهاند که از رنگ زردسبز هستند و ارتفاع و عرض ثابتی دارند.
در نتیجه، عناصر flex در افقی به سمت انتهای راست و عمودی به سمت مرکز کانتینر ترتیب داده میشوند، همانطور که با تنظیمات CSS مشخص شده است.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: flex-end center; /* اینجا place-content را تنظیم میکنیم */
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
last baseline Value
در این مثال، ویژگی place-content
در CSS برای تراز کردن موارد فلکسیبل در هر دو محور اصلی و عرضی یک کانتینر فلکسیبل به صورت همزمان استفاده میشود. با استفاده از این ویژگی، میتوانید به صورت یکجا تراز کردن عناصر را هم در افقی و هم در عمودی تنظیم کنید.
حالا، بیایید این مثال خاص را تحلیل کنیم
در این مثال:
.flex-container
یک کانتینر فلکسیبل است که دارای پس زمینه قرمز، ارتفاع ۳۰۰ پیکسل و حاشیه سیاه دو پیکسل است.display: flex;
کانتینر را به عنوان یک کانتینر فلکسیبل تعریف میکند، که ویژگیهای فلکسی را بر روی فرزندانش اعمال میکند.flex-wrap: wrap;
به عناصر فلکسیبل اجازه میدهد که در صورت نیاز به چند خط منعطف شوند.place-content: last baseline;
عناصر فلکسیبل را به گونهای تراز میکند که آخرین خط آنها به روی خط پایهای بلندترین مورد در آن خط تراز شود. این به این معنی است که آخرین ردیف از موارد به تراز خط پایهای از مورد بلندترین ردیف تراز میشود..flex-container > div
سبک عناصر فلکسیبل را تنظیم میکند. آنها دارای پایه فلکسی ۱۰۰ پیکسل، ارتفاع ۵۰ پیکسل، حاشیه ۵ پیکسل و پس زمینهای با رنگ زردسبز هستند.
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: last baseline;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
space-between Value
در این مثال، ویژگی place-content
با مقدار space-between
برای توزیع متساوی فضا بین موارد فلکسیبل درون کانتینر فلکسیبل استفاده شده است.
در این مثال:
.flex-container
یک کانتینر فلکسیبل است که دارای پس زمینه قرمز، ارتفاع ۳۰۰ پیکسل و حاشیه سیاه دو پیکسل است.display: flex;
کانتینر را به عنوان یک کانتینر فلکسیبل تعریف میکند، که ویژگیهای فلکسی را بر روی فرزندانش اعمال میکند.flex-wrap: wrap;
به عناصر فلکسیبل اجازه میدهد که در صورت نیاز به چند خط منعطف شوند.place-content: space-between;
فضای مساوی را بین عناصر فلکسیبل درون کانتینر توزیع میکند. این باعث میشود تا فاصله بین هر دو مورد فلکسیبل به طور یکنواخت توزیع شود..flex-container > div
سبک عناصر فلکسیبل را تنظیم میکند. آنها دارای پایه فلکسی ۱۰۰ پیکسل، ارتفاع ۵۰ پیکسل، حاشیه ۵ پیکسل و پس زمینهای با رنگ زردسبز هستند.
این تنظیمات یک کانتینر فلکسیبل با هفت مورد فلکسیبل در داخل ایجاد میکند. ویژگی place-content: space-between;
باعث میشود که فضای متساوی بین هر دو مورد فلکسیبل درون کانتینر توزیع شود، ایجاد میکند.
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: space-between;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
space-around Value
در این مثال، ویژگی place-content
با مقدار space-around
برای توزیع متساوی فضایی در اطراف موارد فلکسیبل درون کانتینر فلکسیبل استفاده شده است.
در این مثال:
.flex-container
یک کانتینر فلکسیبل است که دارای پس زمینه قرمز، ارتفاع ۳۰۰ پیکسل و حاشیه سیاه دو پیکسل است.display: flex;
کانتینر را به عنوان یک کانتینر فلکسیبل تعریف میکند، که ویژگیهای فلکسی را بر روی فرزندانش اعمال میکند.flex-wrap: wrap;
به عناصر فلکسیبل اجازه میدهد که در صورت نیاز به چند خط منعطف شوند.place-content: space-around;
فضای متساوی را حول هر مورد فلکسیبل درون کانتینر توزیع میکند. این باعث میشود تا فاصله مساوی در اطراف هر مورد فلکسیبل ایجاد شود..flex-container > div
سبک عناصر فلکسیبل را تنظیم میکند. آنها دارای پایه فلکسی ۱۰۰ پیکسل، ارتفاع ۵۰ پیکسل، حاشیه ۵ پیکسل و پس زمینهای با رنگ زردسبز هستند.
این تنظیمات یک کانتینر فلکسیبل با هفت مورد فلکسیبل در داخل ایجاد میکند. ویژگی place-content: space-around;
باعث میشود که فضای متساوی در اطراف هر مورد فلکسیبل درون کانتینر توزیع شود، ایجاد میکند.
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: space-around;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
space-evenly Value
در این مثال، ویژگی place-content
با مقدار space-evenly
برای توزیع متساوی فضایی (هم بین و هم دور از موارد فلکسیبل) درون کانتینر فلکسیبل استفاده شده است.
در این مثال:
.flex-container
یک کانتینر فلکسیبل است که دارای پس زمینه قرمز، ارتفاع ۳۰۰ پیکسل و حاشیه سیاه دو پیکسل است.display: flex;
کانتینر را به عنوان یک کانتینر فلکسیبل تعریف میکند، که ویژگیهای فلکسی را بر روی فرزندانش اعمال میکند.flex-wrap: wrap;
به عناصر فلکسیبل اجازه میدهد که در صورت نیاز به چند خط منعطف شوند.place-content: space-evenly;
فضای متساوی را به صورت یکسان و هم در اطراف و هم بین عناصر فلکسیبل درون کانتینر توزیع میکند. این باعث میشود تا فاصله متساوی بین هر مورد فلکسیبل ایجاد شود..flex-container > div
سبک عناصر فلکسیبل را تنظیم میکند. آنها دارای پایه فلکسی ۱۰۰ پیکسل، ارتفاع ۵۰ پیکسل، حاشیه ۵ پیکسل و پس زمینهای با رنگ زردسبز هستند.
این تنظیمات یک کانتینر فلکسیبل با هفت مورد فلکسیبل در داخل ایجاد میکند. ویژگی place-content: space-evenly;
باعث میشود که فضای متساوی به صورت یکسان و هم در اطراف و هم بین عناصر فلکسیبل درون کانتینر توزیع شود، ایجاد میکند.
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: space-evenly;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>مورد فلکسیبل ۱</div>
<div>مورد فلکسیبل ۲</div>
<div>مورد فلکسیبل ۳</div>
<div>مورد فلکسیبل ۴</div>
<div>مورد فلکسیبل ۵</div>
<div>مورد فلکسیبل ۶</div>
<div>مورد فلکسیبل ۷</div>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام