شرح الخاصية display والتحكم في تخطيط الصفحة

شرح خاصية display في CSS

مقدمة عن خاصية display

خاصية display في CSS تُحدد كيفية عرض العنصر في الصفحة. لكل عنصر في HTML قيمة افتراضية لـ display، مثل block أو inline، ويمكن تغيير هذه القيمة لتعديل سلوك العنصر.

قيم خاصية display

هناك العديد من القيم التي يمكن تعيينها لخاصية display، ومن أهمها:

none

الوظيفة: يُخفي العنصر تمامًا ولا يشغل أي مساحة في الصفحة.

#myDiv {
    display: none;
}
        

هنا سيتم إخفاء العنصر الذي يحتوي على id="myDiv".

block

الوظيفة: يعرض العنصر كعنصر كُتلي block-level element يأخذ العرض الكامل المتاح ويبدأ في سطر جديد.

div {
    display: block;
}
        

العناصر مثل <div> و<p> لها قيمة display افتراضية هي block.

inline

الوظيفة: يعرض العنصر كعنصر سطري inline-level element لا يبدأ سطرًا جديدًا ويأخذ فقط المساحة التي يحتاجها محتواه.

span {
    display: inline;
}
        

العناصر مثل <span> و<a> لها قيمة display افتراضية هي inline.

inline-block

الوظيفة: يجمع بين خصائص inline وblock. العنصر يعرض في سطر واحد (مثل inline) ولكن يمكن تعيين عرض وارتفاع له (مثل block).

li {
    display: inline-block;
    width: 100px;
}
        

هنا يتم عرض عناصر القائمة في سطر واحد مع إمكانية تحديد عرض ثابت.

flex

الوظيفة: يُستخدم لإنشاء تخطيطات مرنة (Flexbox). يسمح بتحكم كبير في توزيع العناصر داخل الحاوية.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
        

هنا يتم توسيط العناصر داخل الحاوية أفقياً وعمودياً.

grid

الوظيفة: يُستخدم لإنشاء تخطيطات شبكية grid. يوفر تحكمًا دقيقًا في توزيع العناصر في صفوف وأعمدة.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
        

هنا يتم تقسيم الحاوية إلى ثلاثة أعمدة متساوية.

قيم أخرى

• table: يجعل العنصر يسلك سلوك <table>.
• table-cell: يجعل العنصر يسلك سلوك <td>.
• list-item: يجعل العنصر يسلك سلوك <li>.
• inherit: يرث قيمة display من العنصر الأب.
• initial: يعيد القيمة الافتراضية لـ display.

الفرق بين inline و block وinline-block

• inline: لا يمكن تعيين عرض أو ارتفاع له، ويظهر في نفس السطر.
• block: يبدأ سطرًا جديدًا ويأخذ العرض الكامل المتاح.
• inline-block: يظهر في نفس السطر (مثل inline) ولكن يمكن تعيين عرض وارتفاع له (مثل block).

استخدام display: none مقابل visibility: hidden

• display: none: يُخفي العنصر تمامًا ولا يشغل أي مساحة.
• visibility: hidden: يُخفي العنصر ولكن يحتفظ بالمساحة التي يشغلها.

تخطيط Flexbox

Flexbox هو نموذج تخطيطي يسمح بإنشاء تخطيطات مرنة وديناميكية. من أهم خصائصه:

• flex-direction: يحدد اتجاه العناصر (صف أو عمود).
• justify-content: يتحكم في المحور الرئيسي (الأفقي عادةً).
• align-items: يتحكم في المحور الثانوي (العمودي عادةً).

تخطيط Grid

Grid هو نموذج تخطيطي آخر يوفر تحكمًا أكبر في توزيع العناصر في صفوف وأعمدة. من أهم خصائصه:

• grid-template-columns: يحدد عدد الأعمدة وعرضها.
• grid-template-rows: يحدد عدد الصفوف وارتفاعها.

أمثلة عملية

توسيط عنصر باستخدام Flexbox

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
        

إنشاء تخطيط Holy Grail

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.header, .footer {
    flex: 0 0 50px;
}
.content-body {
    flex: 1;
    display: flex;
}
.content {
    flex: 1;
}
.sidenav, .ads {
    flex: 0 0 100px;
}
        

نصائح عامة

• استخدم flex للتخطيطات البسيطة والمرنة.
• استخدم grid للتخطيطات المعقدة والمتعددة الأعمدة.
• تجنب الإفراط في استخدام display: none لأنه قد يؤثر على SEO.

الخلاصة

خاصية display هي واحدة من أهم الخصائص في CSS للتحكم في تخطيط الصفحة. من خلال فهم القيم المختلفة مثل block، inline، flex، وgrid، يمكنك إنشاء تخطيطات متجاوبة وأنيقة بسهولة.