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

تُحدد الخاصية display ما هو نوع صندوق العرض الذي سيستخدم لعرض العنصر. تؤخذ قيمة الخاصية display في HTML من مواصفة HTML أو من الأنماط الافتراضية للمتصف

الخاصية display

تُحدد الخاصية display ما هو نوع صندوق العرض الذي سيستخدم لعرض العنصر. تؤخذ قيمة الخاصية display في HTML من مواصفة HTML أو من الأنماط الافتراضية للمتصفح أو الأنماط التي يُعرِّفها المستخدم، أما القيمة الافتراضية لخاصية display لمعظم عناصر HTML هي block أو inline  (بعض العناصر لها قيم افتراضية أخرى). ويمكن أن تأخذ إحدى القيم التالي:

1. noneتُخفي العنصر وتمنعه من أن يشغل مساحة في الصفحة.
2. blockتعرض العنصر كعنصر كُتَلي (block-element)، يأخذ كل المساحة الأفقية (العرض) المتاحة، وينتقل للسطر التالي بعد نهاية العنصر.
3. inlineتعرض العنصر كعنصر سطري (inline-element)، لا يمتلك عرض محدد، ولا ينتقل للسطر التالي بعد نهاية العنصر.
4. inline-blockمزيج بين عناصر الكتلة والعناصر السطرية، لا ينتقل للسطر التالي بعد نهاية العنصر ولكن يمكن أن يمتلك عرض محدد.
5. inline-flexتعرض حاوية flex كحاوية سطرية.
6. inline-tableتعرض العنصر كجدول سطري.
7. gridلها سلوك مشابه لسلوك عناصر الكتلة، وتُعرض العناصر بداخلها استنادًا إلى النموذج الشبكي (grid model).
8. flexلها سلوك مشابه لسلوك عناصر الكتلة، وتُعرض العناصر استنادًا إلى نموذج الصندوق المرن(flexbox model).
9. inheritترث قيمة الخاصية من العنصر الأب.
10. initialتُرجع القيمة الإبتدائية للخاصية.
11. tableتجعل العنصر يسلك سلوك مماثل للعنصر <table>.
12. table-cell تجعل العنصر يسلك سلوك مماثل للعنصر <td>.
13. table-columnتجعل العنصر يسلك سلوك مماثل للعنصر <col>.
14. table-rowتجعل العنصر يسلك سلوك مماثل للعنصر <tr>.
15. list-itemتجعل العنصر يسلك سلوك مماثل للعنصر <li>.

العناصر السطرية (inline elements)

تأخذ العناصر السطرية عرض محتواها، ولا يُمكن إضافة عنصر غير سطري (non-inline element) داخل عنصر سطري.

مثال

<span>This is some <b>bold</b> text!</span>

النتيجة

 

العناصر الكتلية (block elements)

تأخذ العناصر الكتلية أكبر عرض متاح لها، وتبدأ بسطر جديد وتنتقل لسطر جديد بعد نهاية العنصر، ويُمكن إضافة أي نوع من العناصر داخلها.

مثال

<div>Hello world!</div><div>This is an example!</div>

النتيجة

 

القيمة inline-block

القيمة inline-block هي مزيج بين خصائص العناصر السطرية وعناصر الكتلة، فهي تعرض العناصر في سطر (صف) واحد تمامًا مثل inline ولكنها تسمح بإستعمال الخواص padding و margin وheight (والتي ليس لها أثر على العناصر السطرية) معها.

المثال التالي يوضح الفرق بين القيم inline و block و inline-block:

Inline 1

<!-- Inline -->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;
    border-width:2px;
    border-color:black;
    border-style:solid;
}
</style>
<ul>
    <li>First Element </li>
    <li>Second Element </li>
    <li>Third Element </li>
</ul>

النتيجة

block 2

<!-- block -->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;
    border-width:2px;
    border-color:black;
    border-style:solid;
}
</style>
<ul>
    <li>First Element </li>
    <li>Second Element </li>
    <li>Third Element </li>
</ul>

النتيجة

inline-block 3

<!-- inline-block -->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px;
    border-width:2px;
    border-color:black;
    border-style:solid;
}
</style>
<ul>
    <li>First Element </li>
    <li>Second Element </li>
    <li>Third Element </li>
</ul>

النتيجة

اخفاء العناصر

تُستخدَم القاعدة display: none لإخفاء العنصر ومنعه من أن يشغل مساحة في الصفحة، على عكس القاعدة visibility: hidden والتي تُخفي العنصر ولكن تبقى المساحة التي يشغلها من الصفحة ثابتة مما يؤثر على موضع عرض العناصر التالية له.

مثال

• ملف HTML

  <div id="myDiv">some content</div>



• ملف CSS

  #myDiv {
      display: none;
  }

إنشاء تخطيط جدول باستخدام العنصر div

<style>
    table {
        width: 100%;
    }
</style>

<table>
    <tr>
        <td>
            I'm a table
        </td>
    </tr>
</table>

يُمكن الحصول على نفس ناتج الشيفرة أعلاه باستخدام العنصر div كما هو موضح بالشيفرة التالية:

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div">
    <div class="table-row-div">
        <div class="table-cell-div">
            I behave like a table
        </div>
    </div>
</div>

تخطيط Flexbox

يستخدم نموذج أو تخطيط Flexbox لتوزيع العناصر في مساحة العرض المتاحة توزيعًا مرنًا بحيث تتمدد أو تنكمش مع تَغَيُّر حجم الشاشة.

توسيط العناصر أفقيًا ورأسيًا باستخدام تخطيط Flexbox

إليك مثال حول توسيط عنصر واحد

• ملف HTML:

  <div class="aligner">
      <div class="aligner-item">
          some content
      </div>
  </div>



• ملف CSS

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

  .aligner-item {
      max-width: 50%;
  }

1. align-items center تُوسِّط العناصر أفقيًا إذا كان إتجاه الحاوية رأسي، ورأسيًا إذا كان إتجاه الحاوية أفقي.
2. justify-content center تُوسِّط العناصر أفقيًا إذا كان إتجاه الحاوية أفقي، ورأسيًا إذا كان إتجاه الحاوية رأسي.

مثال

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>

التوسيط أفقيًا في حاوية أفقية

div#container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

النتيجة

التوسيط رأسيًا في حاوية رأسية

div#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

النتيجة

التوسيط رأسيًا في حاوية أفقية

div#container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

النتيجة

التوسيط أفقيًا في حاوية رأسية

div#container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

النتيجة

التوسيط أفقيًا ورأسيًا في حاوية أفقية

div#container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

النتيجة

التوسيط أفقيًا ورأسيًا في حاوية رأسية

div#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

النتيجة

إنشاء تذييل ثابت للصفحة باستخدام تخطيط Flexbox

• ملف HTML

  <div class="header">
      <h2>Header</h2>
  </div>

  <div class="content">
      <h1>Content</h1>
      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
  Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
  ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia
  arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
  himenaeos. Curabitur sodales ligula in libero.
      </p>
  </div>

  <div class="footer">
      <h4>Footer</h4>
  </div>



• ملف CSS

  html, body {
      height: 100%;
  }
  body {
      display: flex;
      flex-direction: column;
  }
  .content {
      flex: 1 0 auto;
  }
  .header, .footer {
      background-color: grey;
      color: white;
      flex: none;
  }

توزيع العناصر بشكل مثالي داخل الحاوية

• ملف HTML

  <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
      <div class="flex-item">5</div>
  </div>



• ملف CSS

  .flex-container {
      background-color: #000;
      height: 100%;
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: stretch;
      align-items: stretch;
  }
  .flex-item {
      background-color: #ccf;
      margin: 0.1em;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 200px;
  }

النتيجة

إنشاء تخطيط Holy Grail باستخدام حاوية flex

تخطيط Holy Grail هو تخطيط يتكون من رأس صفحة (header) بارتفاع ثابت، وثلاثة أعمدة، وذيل صفحة (footer) ثابت.

• ملف HTML

  <div class="container">
      <header class="header">Header</header>
      <div class="content-body">
          <main class="content">Content</main>
          <nav class="sidenav">Nav</nav>
          <aside class="ads">Ads</aside>
      </div>
      <footer class="footer">Footer</footer>
  </div>



• ملف CSS

  body {
      margin: 0;
      padding: 0;
  }
  .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
  }
  .header {
      flex: 0 0 50px;
  }
  .content-body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: row;
  }
  .content-body .content {
      flex: 1 1 auto;
      overflow: auto;
  }
  .content-body .sidenav {
      order: -1;
      flex: 0 0 100px;
      overflow: auto;
  }
  .content-body .ads {
      flex: 0 0 100px;
      overflow: auto;
  }
  .footer {
      flex: 0 0 50px;
  }

محاذاة الأزرار داخل البطاقات باستخدام حاوية flex

 

التخطيط الموضح في الصورة أعلاه هو من التخطيطات الشائعة جدًا، ويوضح المثال التالي كيفية التوصل إليه باستخدام حاوية flex.

• ملف HTML

  <div class="cards">
      <div class="card">
          <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
          mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
          <p><button>Action</button></p>
      </div>

      <div class="card">
          <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
          mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
          <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
          mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
          <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
          mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
          <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
          mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
          <p><button>Action</button></p>
      </div>
  </div>




أولًا نُطبق القاعدة display: flex على الحاوية للحصول على عمودين متساويين في الارتفاع.

• ملف CSS

 .cards {
      display: flex;
  }
  .card {
      border: 1px solid #ccc;
      margin: 10px 10px;
      padding: 0 20px;
  }
  button {
      height: 40px;
      background: #fff;
      padding: 0 40px;
      border: 1px solid #000;
  }p
  :last-child {
      text-align: center;
  }

لدفع الزر إلى أسفل البطاقة يجب إضافة القاعدة display: flex للبطاقة، وتحديد اتجاه الحاوية ليكون عموديًا باستخدام القاعدة flex-direction: column، وأخيرًأ نُطبق القاعدة margin-top: auto على آخر عنصر داخل البطاقة لدفعه إلى أسفلها.

• ملف CSS النهائي

  .cards {
      display: flex;
  }
  .card {
      border: 1px solid #ccc;
      margin: 10px 10px;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
  }
  button {
      height: 40px;
      background: #fff;
      padding: 0 40px;
      border: 1px solid #000;
  }p
  :last-child {
      text-align: center;
      margin-top: auto;
  }

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا