site-logo site-logo
CSS - قرار دادن محتوا (Place Content)
نوشتن نظر کلیک کنید

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>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.