ایجاد شده در ۰۲ آبان ۱۳۹۹
انواع displayها و توضیحات کامل آنها ( سعی شده مهم ترین‌ها و کاربردی ترین‌های آنها گفته شود )
مفهوم inline Element و block Element
inline Element : تگ هایی هستند که به اندازه خودشون میان و فضا میگیرند و اگر اندازه اون محتوای داخلشون کم باشه فضای کمتری میگیرند و اگر زیاد باشه زیاد میگیرند مثل تگ‌های a که اگر ازشون استفاده بکنیم به صورت متوالی میان و در یک سطر قرار میگیرند
block Element : این تگ‌ها علاوه بر محتوای خودشون به اندازه یک سطر هم میان و فضا اشغال میکنند و محتوای تگ بعدی رو به لاین بعدی میفرستن
1 - display : inline »
عناصر inline می توانند margin و / یا padding داشته باشند اما نمی‌توانند width و height داشته باشند. تعیین عرض و ارتفاع برای اینگونه عناصر اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می‌دهید عناصر مجاورشان را در راستای افقی هول میدهند اما در راستای عمودی تاثیری بر روی آنها ندارند. در تصویر زیر متن مشخص شده عنصر span است که از همه جهت padding و margin گرفته است
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, repudiandae
eveniet. Aliquam nisi nostrum <span>emad</span> iusto aut veritatis, eum obcaecati.
Obcaecati eligendi temporibus quas officia quis <span>taghipour</span> eaque. Possimus magnam sed
sint.
</p>
</body> span {
padding: 10px;
margin: 10px;
background-color: red;
}
--------------------------------------------------------------------------------------------------------------------------------
2- display : inline-block » این ویژگی هم شبیه به inline است با این تفاوت که مقادیر عرض و ارتفاع اندازه آن را تغییر خواهند داد و همینطور margin و padding آنها بر روی عناصر مجاور آنها در هر دو راستای عمودی و افقی تاثیر خواهد گذاشت. استایل بالا رو در با پایین جایگزین کنین
--------------------------------------------------------------------------------------------------------------------------------
3- display : block »
در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی‌گیرند و کل فضای افقی را میگیرند (یعنی در حالت پیشفرض کل فضایی که عنصر نگهدارنده آن داشته باشد را اشغال میکند یا به معنای دیگر عرض بیشینه خواهد داشت). عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.
span{
display: inline-block;
padding: 10px;
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
}
--------------------------------------------------------------------------------------------------------------------------------
4- display : none » با استفاده از این ویژگی میاد و کل اون عنصر رو برای ما حذف اش میکند و جای اون رو بقیه عناصر پر میکنند حال اگر بخاهیم بیایم و جای خالی عنصر باقی مانده باشد از ویژگی visibility : hidden استفاده میکنیم که یک لاین خالی رو برای ما درست میکند و اون فضای اشغال شده رو برامون نشان میدهد
--------------------------------------------------------------------------------------------------------------------------------
5- display : inline-flex » رفتار عنصر را تبدیل به inline میکند و عناصر داخلی آن را بر اساس مدل flexbox در کنار هم می‌چیند.
--------------------------------------------------------------------------------------------------------------------------------
6- display : flex » برای چینش المان هامون در راستای عرض یعنی برای عنصر والدی که میایم و ازش استفاده میکنیم در محدوده‌های عرض قابل تغیر هستش و عناصر فرزند هم میتوانند هم در عرض و هم در طول والدشون تغیر بکنند این ماژول دارای ویژگی‌های زیر هست
container : عنصر نگهدارنده که حاوی المان‌های مختلف هستش و حکم والد عناصر رو دارد
item : به فرزندان عناصر والد میگویند
row / column / row-reverse / column-reverse : flex-direction
مشخص کردن جهت فرزندان در داخل عنصر والد
wrap / no-wrap : flex-wrap به طور کلی وقتی فرزندان به انتهای عنصر والدشون می‌رسند شروع میکنند و از مقدار عرض اشون کم میکنند تا در عنصر والد جا شوند اما این پراپرتی میاد و میگوید که فرزندان اگر به انتهای عنصر والد رسیدند به جای کم کردن عرض بیان و شکسته شوند و به لاین بعدی بروند و در آن جا قرار گیرند
flex-start / flex-end / center / space-between / space-around / space-evenly : justify-content
برای جابه جایی فرزندان در راستای عرض عنصر والدشون
flex-start / flex-end / center / baseline / stretch : align-item برای جا به جایی فرزندان در راستای طول عنصر والدشون
flex-start / flex-end / center / stretch / space-between / space-around : align-content
این ویژگی اجازه میدهد زمانی که عنصرهای داخلی بیشتر از یک ردیف هستند بتوان آن چند ردیف را نسبت به محور عمود هم ترازسازی کرد. تصویر زیر گویای ماجراست.
order : مقادیر عددی میگیرد برای جابه جایی عناصر فرزند باهم دیگه کاربرد دارد
flex-grow / flex-shrink / flex-basis : flex خلاصه نویسی
flex-grow : این عامل یک عدد صحیح می‌باشد که نشان میدهد یک عنصر داخلی چند برابر عنصرهای دیگر از فضای عنصر نگهدارنده سهم می‌برد. مثلا اگر همه عنصرها مقدار 1 را داشته باشند فضای عنصر نگهدارنده به صورت برابر بین عنصرهای داخلی تقسیم می‌شود اما اگر یکی از آنها مقدار 2 را بگیرد سهم آن دو برابر سهم دیگر عنصرهای داخلی می‌باشد.
flex-shrink : این عامل به ندرت مورد استقاده قرار میگیرد. کاربرد آن زمانی است که جمع اندازه‌های عنصرهای داخلی بیشتر از عنصر نگهدارنده شود و سرریز داشته باشیم. حال باید عنصرهای داخلی کمی آب شوند (shrink) تا از سرریز جلو گیری شود که این کم کردن اندازه عنصرهای داخلی با توجه به این عامل انجام میگیرد مثال زیر دا در نظر بگیرید:
flex-basis : می توان به هر عنصر یک مقدار flex-basis به صورت زیر اختصاص داد اول از همه این مقدار با توجه به جهت عنصر نگهدارنده به عرض یا ارتقاع به صورت خودکار تعلق میگیرد یعنی اگر جهت عنصر نگهدارنده row باشد این مقدار به عرض عنصرهای داخلی داده می‌شود و اگر column باشد به ارتقاع عنصرهای داخلی تعلق میگیرد
align-self : برای این کار از ویژگی align-self استفاده میکنیم که این ویژگی به عنصر داخلی تعلق میگیرد و مقادیر آن شبیه مقادیر align-items است.
--------------------------------------------------------------------------------------------------------------------------------
7- display : inline-grid » رفتار عنصر را تبدیل به inline میکند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می‌چیند.
--------------------------------------------------------------------------------------------------------------------------------
8- display : grid » این ماژول کامل‌تر از فلکس هستش و از آن برای تراز المان هامون در ارتفاع یا ستون‌ها بهمون کمک میکند و مفاهیم grid-item & grid-container آن مشابه بالایی هستش
مفاهیم مهم اش Gap فاصله بین المان‌ها line خط فرضی بین دو المان ها
پراپرتی‌های مهم آن
grid-template-columns : برای مشخص کردن تعداد ستون‌ها استفاده میکنیم که میتوانیم در آن بیایم
و با مقدار auto تعداد ستون‌های یکسان بدهیم یاهم با مقادیر پیکسلی اندازه ستون‌ها رو مشخص کنیم
grid-template-rows : مشابه یکی بالایی هست ولی یکی بالایی بیشتر کاربرد دارد
grid-column-gap : برای مشخص کردن مقدار فاصله بین ستون‌ها هستش
grid-row-gap : برای مشخص کردن مقدار فاصله بین ردیف‌ها هستش
grid-row-gap / grid-column-gap : grid-gap
flex-start / flex-end / center / space-between / space-around / space-evenly : justify-content
برای جابه جایی فرزندان در راستای عرض عنصر والدشون
grid-column-start / grid-column-end : grid-column برای گرید بندی ستون هامون میایم و از این
استفاده میکنیم که مثلا میگوید از فلان لاین تا فلان لاین بیا و ادامه بده و خودتو بکشون
که این لاین بندی‌ها رو بیا و برای ستون‌ها انجام بده
grid-row-start / grid-row-end : grid-row مشابه یکی بالایی هست فقط برای ردیف‌ها هستش
نکته : مفهوم span برای گام برداشتن در گرید بندی ها
grid-template-areas : برای ستون دهی به صوتر ساده میایم و از این استفاده میکنیم و باید بیایم و از اسامی‌ها برای آن استفاده بکنیم
grid-area : نام هایی که دربالا گزاشته رو میایم و در این‌ها قرار میدهیم