خانه » Display در CSS

Display در CSS

اگر به یادگیری CSS و طراحی سایت علاقمند هستید حتما باید با کاربرد دستور display در css آشنا شوید. به همین دلیل در ادامه و در راستای آموزش html css پروژه محور رایگان با آموزش کامل display در css همراه باشید. در این مقاله هر چیزی را که باید در مورد ویژِگی display در css […]

تعداد نظرات: 0
دسته بندی ها: CSS / HTML
زمان مطالعه: 21 دقیقه

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

اگر به یادگیری CSS و طراحی سایت علاقمند هستید حتما باید با کاربرد دستور display در css آشنا شوید. به همین دلیل در ادامه و در راستای آموزش html css پروژه محور رایگان با آموزش کامل display در css همراه باشید.

در این مقاله هر چیزی را که باید در مورد ویژِگی display در css بدانید را فرا خواهید گرفت.

پیشنهاد می کنیم قبل از شروع یادگیری، برای درک مفهومی تر موضوع، از خواندن را از مقاله css چیست آغاز کنید.

آنچه در این پست می خوانید :

ویژگی display در css چیست
انواع display در css
ویژگی display none
ویژگی display block
ویژگی display inline
ویژگی display inline-block
ویژگی display flex
ویژگی display grid
کاربرد خاصیت display در CSS
کدام مرورگر ها از ویژگی display پشتیبانی می کنند ؟
ارتباطات بین ویژگی های display و position و float

ویژگی display در css چیست

همانطور که در مقالات HTML ذکر کردیم، هر عنصری یا تگ html در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر یا تگ را در یک صفحه مشخص می کند. همچنین ذکر کردیم که در CSS در حالت کلی برای همه عناصر دو نوع چارچوب اصلی وجود دارد: inline و block.

که متناسب با این دو نوع چهار چوب، ما تگ های html را به دو دسته اینلاین و بلاکی تقسیم بندی می کنیم. برای اطلاعات بیشتر مقاله تگ های inline و تگ های block را مطالعه کنید.

متناسب با همین خصوصیت ها، از ویژگی display به معنی نمایش، برای تعیین و تغییر نوع چارچوب نمایش یک عنصر استفاده می شود.

یعنی اینکه مثلا اگر عنصری دارای display block بود آن را متناسب با نیاز به display inline تغییر داده و برعکس. البته مقدار display فرا تر از دو ویژگی inline و block است که در ادامه به آنها خواهیم پرداخت. خوب این از Display چیست، بریم سراغ انواع Display.

انواع display در css

از آنجا که قرار است آموزش کامل display در css را ارئه کنیم می بایست قبل از هر چیزی در مورد انواع display در css صحبت کرده و کامل آنها را توضیح داد.

متناسب با فعالیتی که در صفحات وب انجام خواهیم داد، در حال فعلی و در html5 می توانید از display های زیر در سی اس اس استفاده کنید:

display none
display inline
display block
display inline-block
display list-item
display run-in
display flex
display inline-flex
display flexbox
display inline-flexbox
display grid
display inline-grid
display table
display inline-table
display ruby

اگر به یادگیری html و css علاقمند هستید حتما از فیلم رایگان آموزش html css پروژه محور رایگان استفاده کنید.

ویژگی display none

همانطور که در ابتدا گفته شد دستور display برای مدیریت شیوه نمایش تگ های html استفاده می شود.

حال اگر مقداری display در css برای یک تگ برابر با مقدار none یعنی هیچ باشد، عملا نمایش تگ مورد نظر را محدود کرده اید (نمایش داده نمی شود).

توجه داشته باشید که این کار تگ را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نگذاشته و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند.

نکته مهم سئویی اینکه، وقتی عنصری را با این روش حذف کرده یا نمایش آن را محدود می کنید، ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت.

اگر هنوز html , css را به طور کامل بلد نیستید و میخواهید یک وبمستر حرفه ای بشید و به راحتی تمام امور یک سایت را مدیریت کنید میتوانید در دوره آموزش وبمستر آریا تهران شرکت کنید. در این دوره html , css , javascript و سئو و نحوه کار با ابزار های تخصصی سئو مانند سرچ کنسول و گوگل آنالیتیکس به شما آموزش داده میشود و تمام این آموزش ها متناسب با نیاز بازار کار میباشد.

شما در انتهای این دره میتوانید با مهارت های کسب شده خود به راحتی جذب بازار کار شده و به عنوان یک وبمستر کسب درآمد چندین برابری داشته باشید. استخدام شدن شما با مهارت های کسب شده این دوره جامع قطعی میباشد.

ویژگی display block

تگ هایی با ویژگی پیش فرض display block را تگ های بلاکی می گویند. این تگ ها به واسطه داشتن ویژگی display block یک سطر کامل از وب سایت را به خود اختصاص می دهند.

به عبارتی بر خلاف عناصر اینلاین که فقط به اندازی فضای خود تگ، فضا اشغال می کنند، عناصری با ویژگی display block کل فضای افقی را می گیرند. مثلا تگ nav و تگ header از تگ های بلاکی هستند.

تگ های بلاکی برخلاف عناصر اینلاین می توانند هر نوع عنصری بلاکی و اینلاین را درون خود داشته باشند. که در مثال زیر و مثال های بعدی به آن پرداخته شده است.

در مثال زیر تگ p که یک تگ با display block است داری متن خارجی و با بک گرادند آبی می باشد. همچنین این تگ حاوی یک تگ i (تگ inline) با بکگراند قرمز است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            background: black;
            color: white;
        }
i{
    background: red;
}
p{
    background: blue;
}

    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <p>Hi Aryatehran. I am <i>i tag</i> and my background is red.</p>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

همانطور که در تصویر می بینید، از آنجا که تگ p دارای display با مقداری block است یک سطر کامل را به خود اختصاص داده که با رنگ آبی نمایش داده شده است. و تگ i که دارای display با مقداری inline استف با رنگ قرمز فقط میزان فضایی که تگ نیاز دارد را اشغال کرده است.

از دیگر تگ های مهم با display block می توان به تگ div، تگ p، تگ section و…. اشاره کرد.

شیوه استفاده از دستور display block

اگر در وب سایت قرار بود مثلا تگ یا تگ هایی مثل تگ span، تگ li و امثالهم که تگ هایی با display inline هستند را تبدیل به تگ های بلاکی کنیم، کافی است در کدهای css خود مقداری آن تگ را display block قرار دهیم. مثل کد زیر

در کد زیر ما پیش فرض تگ li که یک تک inline هست را به display block تغییر داده ایم.

li{
display: block;
}

اگر فرصت شرکت در کلاس های حضوری را دارید، امکان شرکت در کلاس html و css آموزشگاه آریا تهران را از دست ندهید. یادگیری و آموزش طراحی سایت به همراه دریافت مدرک بین المللی.

ویژگی display inline

همانطور که در مقاله Inline در css توضیح دادیم، اگر عنصری دارای ویژگی display inline باشد زمانی که در ادامه یک خط و یا یک سطر قرار می گیرد، آن سطر یا خط شکسته نشده و عنصر به خط بعدی نخواهد رفت.

در واقع تگ هایی که inline هستند، خطی بوده و به اندازه فضای مورد نیاز خودشان فضا اشغال می کنند. برعکس تگ های بلاکی که یک سطر کامل را به خود اختصاص می دهند، ولو اینکه به اندازه یک سطر فضا احتیاج نداشته باشند.

تگ em، تگ span و… از این نوع تگ ها هستند که display آنها inline است.

برای مثال در کد زیر کلمات من تگ اسپن هستم و من تگ تاکیدی هستیم در تگ span و تگ em قرار داشته و این کد ها در صفحه وب قرار داشته باشد باعث شکستن خط نمی شوند. همین رفتار در مورد تصویری که در تگ img قرار داده می شود نیز صادق شده است.

البته در کد زیر تگ p دارای خاصیت display block بوده که می تواند تگ های با خاصیت display inline را در خود جای دهد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
span{
    background: blue;
}
em{
    background: red;
}
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <p>Hi Aryatehran. I am <span>span tag</span> and my background is blue. I am <em>em tag </em> and my background is red</p>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>
</html>

چیز که در مورد تگ های با display inline مهم است، این است که شما می توانید به این عناصر margin و یا padding اختصاص دهید، و بر خلاف تگ های با display block نمی توانید از ویژگی های width و height استفاده کنید.

به همین علت زمانی که برای این تگ ها ویژگی padding و margin اختصاص می دهید عناصر مجاورشان را در راستای افقی هول می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند. در کد زیر متن مشخص شده عنصر span است که از همه جهت padding و margin گرفته است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            background: black;
            color: white;
        }
span{
    background: blue;
    padding: 20px;
    margin: 20px;
}

    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <p>Hi Aryatehran. I am <span>span tag</span> and my background is blue. I am inline tag</p>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

البته برای حل این مشکل، درصورتی که بخواهید از ویژگی inline بودن و همچنین عرض و ارتفاع گرفتن برای یک تگ استفاده کنید، می بایست display آن را inline-block قرار دهید. که در ادامه در مورد آن صحبت خواهیم کرد.

شیوه استفاده از دستور display inline

اگر در وب سایت قرار بود مثلا تگ یا تگ هایی مثل تگ div، تگ p و امثالهم که تگ هایی با display block هستند را تبدیل به تگ های اینلاین کنیم، کافی است در کدهای css خود مقدار آن تگ را display inline قرار دهیم. مثل کد زیر

در کد زیر ما پیش فرض تگ div که یک تگ block هست را به display inline تغییر داده ایم.

div{
display: inline;
}

با شرکت در دوره طراحی سایت امکان اشتغال ۱۰۰ درصدی برای شما فراهم خواهد شد. آموزش و یادگیری سریع و حرفه ای را با بهترین آموزشگاه برنامه نویسی و طراحی سایت غرب تهران تجربه کنید.

ویژگی display inline-block

ویژگی inline-block کاملا شبیه به ویژگی inline است با این تفاوت که تگ دارای این ویژگی مثل تگ دارای ویژگی block می تواند مقادیر عرض و ارتفاع بگیرد.

همچنین margin و padding تگ دارای ویژگی display inline-block بر روی عناصر مجاور آن در هر دو راستای عمودی و افقی تاثیر گذار خواهد بود.

تگ img d یک تگ با display اینلاین بلاک است.

در کد زیر تگ a که یک تگ inline است به کمک ویژگی display به چهارچوب inline-block تغییر پیدا کرده است تا بتوان مارجین و پدینگ دریافت کرده و به شکل زیر زیبا نمایش داده شود.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                background-color: #1b1b1b;
  color: #fff;
  direction: rtl;
            }
            nav {
  margin-top: 3em;  
  text-align: center;
}

a {
  display: inline-block;
  margin: 0 .5em;
  padding: 1em;
  background-color: #fff;
  color: #1b1b1b;
  font-size: 1.3em;
  text-decoration: none;
}
    
        </style>
    <style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
    <body>
        <nav>
            <a href="">html</a>
            <a href="">css</a>
            <a href="">javascript</a>
            <a href="">php</a>
          </nav>
    <script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
    </html>

ویژگی display flex

به کمک دستور display flex در CSS رفتار عنصر یا تگ تبدیل به inlne می شود. به وسیله این ویژگی آیتم ها یا تگ های html درون یک تگ container پدری (مثل تگ div) بر اساس مدل Flexbox در کنار هم قرار می گیرند.

به عبارتی دیگر با استفاده از خصوصیت flex می توانیم آیتم های درونی عنصر کانتینر را در یک عرض و ارتفاع تعریف شده، ستون بندی و صفحه آرایی کنیم.

شیوه استفاده از خاصیت display flex در css

همانطور که گفته شده زمانی از display flex استفاده می کنیم که قرار است تعدادی تگ که دخل یک کانتینر قرار گرفته اند را در یک عرض و ارتفاع تعریف شده، ستون بندی و صفحه آرایی کنیم.

توجه داشته باشید که، در صورتی که تگ ها یا آیتم های درون تگ container، صفت display در آنها برابر مقدار flex تعیین نشده باشد، خصوصیت flex نیز بی تاثیر خواهد بود. به عبارت دیگر آیتم های درونی در این حالت از صفحه آرایی فلکس باکس بهره مند نخواهند شد.

به کد زیر دقت کنید:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                background-color: #1b1b1b;
  color: #fff;
  direction: rtl;
            }
            .divbox{
   display:flex;
   justify-content: center;
}

.divbox div{
   width:100px;
   height:100px;
   margin:10px;
}

.Square1{
   background-color:red;
}

.Square2{
   background-color:green;
}

.Square3{
   background-color:blue;
}

.Square4{
   background-color:orange;
}
}
    
        </style>
    <style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
    <body>
        <div class="divbox">
            <div class="Square1"></div>
            <div class="Square2"></div>
            <div class="Square3"></div>
            <div class="Square4"></div>
         </div>
    <script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
    </html>

همانطور که در کد و شکل بالا می بینید، ما ۴ تگ div داریم که بصورت تو در تو داخل یه تگ div پدر جا داده شده اند. ما با اختصاص دادن display: flex به تگ div پد یا والد، طبقه بندی flexbox را به شکل بالا برقرار کرده ایم (البته از ویژگی justify-content: center برای وسط چین کردن استفاده شد).

با استفاده از این دستور عناصر داخلی، برخلاف block بودنشان، inline رفتار کرده و در راستای یک خط یا row قرار گرفته اند. بنابراین اولین تاثیر display: flex، این است که عناصر داخلی یک کانتینر را، هر چه که باشند، در راستای یک خط مرتب می‌کند. اما چطور عناصر داخلی را به دلخواه مرتب کنیم؟ چطور آنها را ستونی کنیم؟

خاصیت flex یک خاصیت کاربردی است که در ادامه آموزش جامع فلکس باکس، می توانید از دستورات زیر نیز استفاده کنید:

flex-direction
justify-content
align-content
align-items
flex-wrap
flex-grow
flex-shrink
flex-basis
flex-flow

برای کسب اطلاعات بیشتر در این خصوص، و یادگیری دستورات بالا حتما فیلم آموزشی موجود در مقاله آموزش flexbox در css را مطالعه کنید.

ویژگی display grid

در کنار روش display flex برای چینش و طبقه بندی عناصر در صفحات وب، روش دیگری هم به اسم display grid داریم. عملکرد و شیوه استفاده از این ویژگی، شباهت زیادی به روش قبل یعنی flexbox دارد.

این ویژگی رفتار تگ را تبدیل به حالت بلاکی کرده و عناصر داخلی آن را بر اساس مدل grid در کنار هم قرار می دهد.

شیوه استفاده از display grid

برای استفاده از این ویژگی کافی است دستور display: grid را به عنصر والد یا همان تگ پدری که می‌خواهیم عناصر داخلی یا فرزندانش را طبقه بندی کنیم اختصاص دهیم. پس از این مرحله، کافی است مثل دستورات موجود در مقاله flexbox از خاصیت های مربوط به grid برای عناصر فرزند استفاده کنیم.

عنصری که دارای دستور display: grid است، یک grid container نامیده می شود و تمام فرزندان آن عنصر، تحت تاثیر خاصیت‌ هایی زیر تغییر می‌کنند.

grid-template-columns
grid-template-rows
grid-column
grid-row
justify-self
align-self

برای کسب اطلاعات بیشتر در این خصوص، و یادگیری دستورات بالا حتما مقاله ویژگی grid در css را مطالعه کنید.

ما در هنگام استفاده از این ویژگی حتما باید از خاصیت های فوق استفاده کنیم. چرا که اگر ما قرار باشد فقط از دستور display grid استفاده کنیم تفاوتی بین این حالت و حالتی که display: block برای هر کدوم از عناصر فرزند ایجاد می کند، مشاهده نمی‌ کنیم. بنابراین در ادامه ما از دستورات grid-template-columns استفاده کردیم.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                background-color: #1b1b1b;
  color: #fff;
  direction: ltr;
            }
            #parent{
   display:grid;
   grid-template-columns: 200px 200px;

}

#parent div{
   height:100px;
   color:white;
   font-size:3em;
}

.box1{
   background-color:blue;
}

.box2{
   background-color:red;
}

.box3{
   background-color:green;
}

.box4{
   background-color:orange;
}

.box5{
   background-color:purple;
}

.box6{
   background-color:lightcoral;
}
}
    
        </style>
    <style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-3205c871-9d51-49bd-b1ca-664959498d79: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
    <body>
        <div id="parent">
            <div class="box1">۱</div>
            <div class="box2">۲</div>
            <div class="box3">۳</div>
            <div class="box4">۴</div>
            <div class="box5">۵</div>
            <div class="box6">۶</div>
         </div>
    <script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
    </html>

همانطور که در شکل و کد بالا می بینید توسط خاصیت grid-template-columns، توانستیم تعداد ستون های مورد نیاز برای نمایش را ۲ عدد در نظر بگیرم که عناصر فرزند در اون ها قرار می‌گیرند. توجه داشته باشید که خاصیت grid-template-columns برای عنصر پدر نوشته شده است.

برای یادگیری قابلیت های بالای این display در css حتما مقاله مرتبط را مطالعه کنید.

کاربرد خاصیت display در CSS

همانطور که گفته شد، با استفاده از ویژگی display شما می توانید رفتار پیشفرض عناصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و برعکس تبدیل کنید.

اگر قرار است html و css را کامل یادبگیرد، حتما خواندن از صفر و با خواندن مقاله doctype html چیست شروع کنید.

کدام مرورگر ها از ویژگی display پشتیبانی می کنند ؟

نام مررورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

ویژگی display در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, اپرا, سافاری و اینترنت اکسپلورر و همچنین اندروید و iOS پشتیبانی می شود. مقدار run-in فقط در مرورگرهای اپرا و سافاری و اینترنت اکسپلورر ۸ به بالا پشتیبانی می شود. و همچنین تا نسخه ۳۲ کروم پشتیبانی می شد اما از آن به بعد کروم این ویژگی را پشتیبانی نمی کند. در جداول زیر پشتیبانی مرورگرها در مورد flex و grid نمایش داده شده است:

ارتباطات بین ویژگی های display و position و float

اگر مقاله position در css و همچنین مقاله float در css را خوانده باشید می دانید که اگر display مقدار none داشته باشد عنصر کلا نمایش داده نخواهد شد و ویژگی های float و position نیز روی عنصر تاثیری نخواهند داشت.

همچنین اگر display ما مقدار داشته باشد و position مقدار absolute و یا fixed داشته باشد ویژگی float تاثیری بر روی عنصر نخواهد گذاشت و برابر none خواهد بود و مقدار display بر اساس جدول زیر محاسبه می شود.

همچنین اگر display ما مقدار داشته باشد و float مقداری غیر از none باشد، تگ رفتار float خواهد داشت و مقدار display بر اساس جدول زیر محاسبه می شود.

همچنین اگر display ما مقدار داشته باشد و تگ مورد نظر تگ html باشد ویژگی display بر اساس جدول زیر محاسبه می شود.

اگر هیچ کدام از شرایط بالا را نداشته باشیم. مقدار display همانی خواهد بود که از قبل تعیین کرده اید.

مقداری که شما تعیید کرده اید	مقداری که مرورگر جایگزین می کند
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
مقادیر دیگر	برابر با مقداری که تعیین شده است
style	برای اضافه کردن دستورات سی اس اس خطی به یک صفحه ی وب کاربرد دارد.
link	برای فراخوانی فایل های خارجی مثل css در یک صفحه ی وب به کار می رود.
base	برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه ی وب.

همانطور که در جدول بالا مشخص است، ویژگی display در تمام مرورگرهای اصلی و همچنین اندروید و iOS پشتیبانی می شود.

البته مقدار run-in فقط در مرورگرهای اپرا و سافاری و اینترنت اکسپلورر ۸ به بالا و در کروم تا نسخه ۳۲ پشتیبانی می شود. در مورد مقادیر grid و flex هم همچنین.

سوالات متداول

آیا عناصری با display block را می توان به display inline تبدیل کرد؟

همانطور که در متن مقاله اشاره شد، یکی از کاربردهای خاصیت display تغییر چهارچوب نمایش عناصر در html است. شما به کمک ویژگی display می توانید شیوه نمایش هر عنصری را به flex, ruby, block, inline, inline-block و… تغییر دهید.

برای طبقه بندی عناصر در صفحات وب استفاده از display flex بهتر است یا display grid؟

قطعا جواب این سوال به نیاز شما از شیوه طبقه بندی وابسته است. ولی به کمک display grid شاید بتوانید طبقه بندی عجیب تری نسبت به display flex در اختیار داشته باشید.

→ گذاشتن آهنگ در استوری اینستاگرام اندروید و آیفون

محیط نرم افزار تری دی مکس ←