يوم جيد ، أيها الأصدقاء!



فيما يلي دليل ورقة غش مرئي كامل لجميع خصائص وحدات Flexbox و Grid CSS.



المصادر الرئيسية: دليل كامل إلى Flexbox ، دليل كامل للشبكة .



في نهاية المقال ، ستجد برنامجًا تعليميًا قصيرًا حول إنشاء جهاز محاكاة Flexbox.



بدون ديباجة أخرى.

Flexbox (Flex ، المشار إليه فيما يلي باسم Flex)

المصطلح

فليكس ليست خاصية منفصلة ، ولكنها وحدة كاملة تتضمن مجموعة من الخصائص. تتم إضافة بعض هذه الخصائص إلى الحاوية (العنصر الرئيسي ، المعروف باسم الحاوية المرنة) ، بينما تتم إضافة البعض الآخر إلى العناصر الفرعية (المعروفة باسم العناصر المرنة ، فيما يلي - عناصر)).



يعتمد التخطيط "العادي" على تدفق عناصر الكتلة والعناصر المضمنة ، بينما يعتمد التخطيط المرن على اتجاهات التدفق المرن. ألق نظرة على هذه الصورة من المواصفات لعرض الأفكار الرئيسية وراء التصميم المرن.







يتم ترتيب العناصر على طول المحور الرئيسي (من البداية الرئيسية إلى النهاية الرئيسية) أو على طول المحور المتقاطع (من البداية المتقاطعة إلى النهاية المتقاطعة).

• — , , . ; «flex-direction» (, . )
• main-start | main-end — main-start main-end
• (main size) — (main dimension),
• — , .
• cross-start | cross-end — , cross-end cross-start
• (cross size) —

-

display

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

.container {
  display: flex; /*  inline-flex */
}

لاحظ أن خصائص عمود CSS في الحاوية لا تعمل.

الاتجاه المرن

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

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (افتراضي): يتم ترتيب العناصر من اليسار إلى اليمين في ltr أو من اليمين إلى اليسار في rtl
• عكس الصف: ترتيب الصف العكسي للعناصر - من اليمين إلى اليسار في ltr أو من اليسار إلى اليمين في rtl
• العمود: مشابه للصف ، ولكن من أعلى إلى أسفل
• عمود عكس: مشابه لعكس الصف ، ولكن من أسفل إلى أعلى

التفاف المرن (التفاف ، الانتقال ، الانقسام)

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

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (افتراضي): جميع العناصر في سطر واحد
• التفاف: يمكن أن تمتد العناصر على عدة أسطر من أعلى إلى أسفل
• الالتفاف العكسي: يمكن أن تمتد العناصر إلى عدة أسطر من الأسفل إلى الأعلى

التدفق المرن (التدفق)

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

.container {
  flex-flow: column wrap;
}

تبرير المحتوى (محاذاة المحتوى في سطر واحد)

تحدد هذه الخاصية محاذاة العناصر على طول المحور الرئيسي. يسمح لك بتوزيع المساحة الخالية التي تتركها العناصر غير المستخدمة ذات الحجم الثابت أو العناصر المرنة التي وصلت إلى أقصى حجم لها. كما يسمح لك بالتحكم في محاذاة العناصر الفائضة.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• بدء التشغيل المرن (افتراضي): يتم نقل العناصر إلى بداية الحاوية على طول المحور الرئيسي
• نهاية مرنة: يتم دفع العناصر إلى نهاية الحاوية
• البدء: يتم نقل العناصر إلى بداية الحاوية ، ويتم تحديدها بقيمة خاصية "وضع الكتابة"
• النهاية: يتم نقل العناصر إلى نهاية الحاوية ، ويتم تحديدها بواسطة قيمة خاصية "وضع الكتابة"
• اليسار: يتم دفع العناصر إلى الحافة اليسرى للحاوية ؛ بدون الاتجاه المرن ، يكون السلوك هو نفسه البداية
• يمينًا: يتم ضغط العناصر على الحافة اليمنى للحاوية ؛ بدون الاتجاه المرن ، يكون السلوك مشابهًا للبدء
• center:
• space-between: , , — ,
• space-around: . , ; , . , ,
• space-evenly: ,

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



أما بالنسبة للكلمات الرئيسية الإضافية "آمن" و "غير آمن" ، فإن استخدام "آمن" يسمح لك بتجنب عرض العناصر خارج الصفحة ، بغض النظر عن الموضع ، مما يلغي بدوره إمكانية التمرير.

محاذاة العناصر (محاذاة العناصر)

تحدد هذه الخاصية كيفية وضع العناصر على طول المحور العرضي. يمكن مقارنتها بضبط المحتوى للمحور العرضي (عمودي على المحور الرئيسي).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• تمتد (افتراضي): تمتد العناصر لملء الحاوية بأكملها (يعتمد على الحد الأدنى للعرض / العرض الأقصى)
• البدء المرن / البدء / البدء الذاتي: يتم إزاحة العناصر إلى بداية المحور المتقاطع. الاختلافات بين الخصائص المذكورة أعلاه ليست كبيرة وتعتمد على الاتجاه المرن أو وضع الكتابة
• flex-end / end / self-end: يتم إزاحة العناصر إلى نهاية المحور المتقاطع. الاختلافات بين الخصائص المذكورة أعلاه ليست كبيرة وتعتمد على الاتجاه المرن أو وضع الكتابة
• المركز: تتركز العناصر
• خط الأساس: تتم محاذاة العناصر على طول خط الأساس

يمكن استخدام الكلمات الأساسية المعدلة "آمن" و "غير آمن" كإعدادات إضافية لتجنب محاذاة العناصر التي تجعل المحتوى غير قابل للوصول (لا يمكن الوصول إليه خارج الصفحة).

محاذاة المحتوى (محاذاة المحتوى عبر عدة أسطر)

تحدد هذه الخاصية محاذاة خطوط الحاوية عند وجود مساحة خالية على طول المحور العرضي. إنه مشابه لضبط المحتوى ، والذي يوزع المسافة بين العناصر الفردية على طول المحور الرئيسي.



لاحظ أن الخاصية المعنية تنطبق فقط على محتوى الحاوية الذي يمتد على عدة أسطر عند تعيين خاصية الالتفاف المرن على الالتفاف أو الالتفاف العكسي. بالنسبة إلى الأسطر الواحدة (عند تعيين خاصية "الالتفاف المرن" على "عدم الالتفاف") لن يكون لتطبيق محاذاة المحتوى أي تأثير.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• عادي (افتراضي): الخطوط في المواضع العادية
• البدء المرن / البداية: يتم نقل الخطوط إلى بداية الحاوية. يعتمد البدء المرن على الاتجاه المرن والبدء يعتمد على وضع الكتابة
• نهاية / نهاية مرنة: يتم دفع الخطوط إلى نهاية الحاوية. تعتمد النهاية المرنة على الاتجاه المرن وتعتمد النهاية على وضع الكتابة
• المركز: تتركز الخطوط
• مسافة بين السطور: يتم تباعد الأسطر بحيث يكون السطر الأول في بداية الحاوية ، والأخير في النهاية ، ويتم تباعد الأسطر المتبقية بشكل متساوٍ
• space-around: تتباعد الخطوط بمسافة متساوية بينهما
• مسافات متساوية: تتباعد الخطوط بمسافات متساوية حول كل منها
• تمتد: تمتد الخطوط لتستهلك كل المساحة المتاحة

يمكن استخدام الكلمات الأساسية المعدلة "آمن" و "غير آمن" كإعدادات إضافية لتجنب محاذاة العناصر التي تجعل المحتوى غير قابل للوصول (لا يمكن الوصول إليه خارج الصفحة).

خصائص العنصر المرن

طلب (طلب)

بشكل افتراضي ، يتم ترتيب العناصر في الحاوية بالترتيب الذي تظهر به في العلامات. هذه الخاصية تسمح لك بالتحكم في هذا.

.item {
  order: 5; /*    0 */
}

نمو مرن (نمو ، توسع)

تحدد هذه الخاصية قدرة العنصر على التوسع عند الحاجة. يأخذ قيمة عددية تعمل كنسبة. يحدد التناسب مقدار المساحة المتوفرة في الحاوية التي يمكن أن يشغلها العنصر.



إذا كانت جميع العناصر بها زيادة مرنة قدرها 1 ، فسيتم توزيع المساحة المتاحة بالتساوي بينها. إذا كان أحد العناصر يحتوي على زيادة مرنة قدرها 2 ، فسيشغل هذا العنصر مساحة مضاعفة للعناصر الأخرى (أو على الأقل حاول القيام بذلك).

.item {
  flex-grow: 4; /*   0 */
}

القيم السالبة غير صالحة.

مرن يتقلص (يتقلص ، يتقلص)

تحدد هذه الخاصية قدرة العنصر على الضغط عند الحاجة.

.item {
  flex-shrink: 3; /*   1 */
}

القيم السالبة غير صالحة.

أساس مرن

تحدد هذه الخاصية الحجم الافتراضي للعنصر قبل توزيع المساحة المتبقية. يمكن أن يكون هذا الحجم طولًا (مثل 20٪ ، 5rem ، إلخ) أو كلمة رئيسية. تعني الكلمة الأساسية التلقائية استخدام قيمة خاصية "العرض" أو "الارتفاع" للعنصر (سابقًا ، تم استخدام الحجم الرئيسي بدلاً من تلقائي). تعني الكلمة الأساسية "المحتوى" حساب محتوى العنصر. الكلمة الرئيسية المذكورة ليست مدعومة جيدًا حتى الآن ، لذلك من الصعب معرفة الفرق بين الحد الأدنى للمحتوى والحد الأقصى للمحتوى والمحتوى المناسب.

.item {
  flex-basis:  | auto; /*   auto */
}

إذا كانت قيمة هذه الخاصية تساوي 0 ، فلن يتم أخذ المساحة المحيطة بالعنصر في الاعتبار. إذا كانت القيمة "auto" ، يتم تخصيص المساحة المتاحة وفقًا لقيمة خاصية "flex-Grow".

ثني

هذه الخاصية هي اختصار للنمو المرن ، والتقلص المرن ، والأساس المرن. المعلمات الثانية والثالثة (Flex-shrink و Flex-base) اختيارية. القيمة الافتراضية هي 0 1 auto ، ويمكن حذفها auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

يوصى باستخدام هذا الاختصار بدلاً من تعريف كل خاصية بحيث يتم تحديد قيم الخاصية تلقائيًا بالترتيب الصحيح.

محاذاة ذاتية (محاذاة عنصر واحد)

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



انظر شرح محاذاة العناصر للقيم المتاحة.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

لاحظ أن المحاذاة العائمة والواضحة والعمودية ليس لها تأثير على العنصر المرن.

أمثلة على

لنبدأ بمثال بسيط للغاية - حل مشكلة محاذاة عنصر إلى المركز.

.parent {
  display: flex;
  height: 300px; /*     */
}

.child {
  width: 100px;  /*     */
  height: 100px; /*     */
  margin: auto;  /* ! */
}

يعمل هذا لأن خاصية "margin" المعينة على "auto" تبتلع كل مساحة الحاوية المرنة المتاحة. لذلك ، يؤدي تعيين قيمة الحشوة الرأسية على تلقائي إلى توسيط مثالي للعنصر على كلا المحورين.



الآن دعنا نحاول استخدام المزيد من الخصائص. لدينا 6 عناصر ذات حجم ثابت يمكن تغيير حجمها اعتمادًا على عرض الشاشة دون تضمين استعلامات الوسائط. نريد أن يتم توزيع المساحة المتاحة للمحور الرئيسي بالتساوي بين العناصر.

.flex-container {
  /*     - */
  display: flex;

  /*     ,
           
   *       :
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* ,  ,      */
  justify-content: space-around;
}

منجز. يبقى الأسلوب قليلاً:







لنجرب شيئًا آخر. لنفترض أن لدينا قائمة تنقل محاذية لليمين في رأس موقعنا ، ونريد أن يتم توسيطها على شاشات متوسطة وتصطف في عمود واحد على شاشات صغيرة. سهل جدا.

/*   */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /*          */
  justify-content: flex-end;
}

/*   */
@media (max-width: 800px) {
  .navigation {
    /*                 */
    justify-content: space-around;
  }
}

/*   */
@media (max-width: 500px) {
  .navigation {
    /*           ()   () */
    flex-direction: column;
  }
}

دعونا نجرب مرونة العناصر. ماذا عن إنشاء تخطيط مكون من ثلاثة أعمدة للجوال برأس وتذييل بالحجم الكامل لا يعتمد على ترتيب العناصر في العلامات.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/*   flex-basis       100% */
.wrapper > * {
  flex: 1 100%;
}

/*      
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/*   */
@media all and (min-width: 600px) {
  /*        */
  .aside { flex: 1 auto; }
}

/*   */
@media all and (min-width: 800px) {
  /*      main 
   *   main   2   ,  
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

موارد مفيدة

• تخصيص
• MDN
• ورقة الغش Flexbox
• فليكس بوكس ​​فروجي

الدعم

الشبكة (المشار إليها فيما يلي باسم الشبكة أو الشبكة)

يعد CSS Grid Layout أقوى أداة لتخطيط الصفحات. إنه نظام ثنائي الاتجاه. هذا يعني أنه يمكن أن يعمل مع كل من الصفوف والأعمدة ، على عكس Flex ، والذي يمكن أن يعمل فقط مع الصفوف. تتضمن الشبكة خصائص العنصر الأصل (حاوية الشبكة ، المشار إليها فيما يلي باسم الحاوية) وخصائص العناصر الفرعية (عناصر الشبكة ، عناصر الشبكة ، المشار إليها فيما بعد بالعناصر).

المصطلح

حاوية الشبكة (يشار إليها فيما بعد بالحاوية)

عنصر تم تعيينه لخاصية "عرض" بقيمة "شبكة" يصبح حاوية شبكة. هذه الحاوية هي الأصل المباشر لجميع عناصر الشبكة. في المثال التالي ، div مع الفئة "container" هو حاوية شبكة.

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

خط الشبكة (يشار إليه فيما بعد بالخط)

الخط الفاصل الذي يشكل هيكل الشبكة. يمكن أن يكون رأسيًا أو أفقيًا ويشير إلى حد صف أو عمود. الخط الأصفر في الصورة أدناه هو مثال على خط شبكة عمودي (خط شبكة العمود).

مسار الشبكة (يشار إليه فيما بعد بالمسار أو المسار)

المسافة بين خطين متجاورين. يمكنك التفكير في المسارات كصفوف أو أعمدة للشبكة. هذا مثال على مسار بين الخطين الثاني والثالث.

منطقة الشبكة (المشار إليها فيما يلي باسم المنطقة)

المسافة الكلية بين الأسطر الأربعة. يمكن أن تمتد المنطقة على أي عدد من خلايا الشبكة. فيما يلي مثال للمنطقة الواقعة بين الخطين الأفقيين 1 و 3 والخطوط الرأسية 1 و 3.

عنصر الشبكة (يشار إليه فيما بعد بالعنصر)

الطفل (سليل مباشر) للحاوية. في المثال التالي ، العناصر التي تحتوي على فئة "عنصر" هي عناصر شبكة ، ولكن العناصر التي تحتوي على فئة "عنصر فرعي" ليست كذلك.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

خلية الشبكة (يشار إليها فيما بعد بالخلية)

المسافة بين خطين متجاورين أفقي ورأسي. هذه هي الوحدة الأساسية للشبكة. فيما يلي مثال لخلية بين الخطين الأفقيين 1 و 2 والخطوط الرأسية 2 و 3.

مثال

أعمدة ذات عرض مرن يتم تغيير حجمها تلقائيًا بناءً على عرض الشاشة بدون استعلامات الوسائط.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /*      min() */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /*    ,    */
  /* gap: 1rem */
}

خصائص حاوية الشبكة

عرض

تجعل هذه الخاصية العنصر حاوية شبكة وتعيين سياق الشبكة لمحتواه.

.container {
  display: grid | inline-grid;
}

• الشبكة - كتلة الشبكة
• مضمنة الشبكة - مضمنة الشبكة

لاحظ أنه تم نقل القدرة على إنشاء شبكات متداخلة إلى مواصفات CSS Grid Level 2 .

أعمدة شبكة القوالب ، صفوف قالب الشبكة

تحدد هذه الخصائص أعمدة وصفوف قيم الشبكة المفصولة بمسافة. تمثل القيم حجم المسار ، وتمثل المسافات الخط.

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

• <track-size> - الطول أو النسبة المئوية أو كسور المساحة الخالية للشبكة (باستخدام وحدة "fr")
• <line-name> - اسم عشوائي

عندما تترك مسافة بيضاء بين قيم المسار ، يتم تلقائيًا تعيين أرقام موجبة وسالبة للخطوط:

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

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

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

يمكن أن يكون للخطوط عدة أسماء. هنا ، على سبيل المثال ، السطر الثاني له اسمان:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

إذا كان التعريف يحتوي على أجزاء متكررة ، فيمكنك استخدام عبارة "تكرار" لاختصار:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

وهو ما يعادل الآتي:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

إذا كان للعديد من الأسطر نفس الاسم ، فيمكنك استخدام اسم السطر وعدد هذه الأسطر.

.item {
  grid-column-start: col-start 2;
}

تسمح لك وحدة "fr" بتعيين حجم المسار كجزء من المساحة الخالية للحاوية. في المثال أدناه ، يمثل كل عنصر ثلث عرض الحاوية:

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

يتم حساب المساحة الحرة بعد طرح العناصر ذات الحجم الثابت. في المثال التالي ، المساحة المتاحة للتخصيص باستخدام وحدة "fr" لا تتضمن 50 بكسل:

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

مناطق قالب الشبكة

تحدد هذه الخاصية قالب الشبكة باستخدام أسماء المناطق المحددة في خصائص "منطقة الشبكة". يؤدي تكرار أسماء المناطق إلى توسيع المحتوى بعدد الخلايا المحدد. تعني النقطة خلية فارغة. يسمح لك بناء الجملة هذا بتصور بنية الشبكة.

.container {
  grid-template-areas:
    " | . | none | ..."
    "...";
}

• <grid-area-name> - اسم المنطقة
• ... - خلية فارغة
• لا شيء - لا منطقة

مثال:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

ينشئ هذا الرمز شبكة بعرض أربعة أعمدة وارتفاعها ثلاثة أسطر. السطر الأول (العلوي) مشغول بالكامل بالرأس. يتكون الصف الأوسط من منطقتين "رئيسيتين" ، وخلية واحدة فارغة ، ومنطقة "شريط جانبي". السطر الأخير هو الطابق السفلي.







يجب أن يحتوي كل سطر في التعريف على نفس عدد الأعمدة.



يمكن استخدام أي عدد من النقاط لتمثيل خلية فارغة. طالما أنه لا توجد مسافة بين النقاط ، فهي مؤشر على وجود خلية فارغة.



لاحظ أن بناء الجملة هذا يُستخدم للإشارة إلى المناطق وليس الخطوط. باستخدام بناء الجملة هذا ، يتم تسمية الخط الموجود على كل جانب من جوانب المنطقة تلقائيًا. إذا كان اسم المنطقة هو "foo" ، فسيكون أول سطر (سطر وعمود) من المنطقة هو "foo-start" والأخير - "foo-end". هذا يعني أن بعض الأسطر يمكن أن يكون لها أسماء متعددة ، كما في المثال أعلاه ، حيث يحتوي السطر العلوي الأيسر على ثلاثة أسماء: header-start و main-start و footer-start.

قالب الشبكة

هذه الخاصية عبارة عن اختصار لصفوف قالب الشبكة وأعمدة قالب الشبكة ومناطق قالب الشبكة.

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

• بلا - إعادة تعيين قيم الخصائص الثلاث على الوضع الافتراضي
• <grid-template-rows> / <grid-template-columns> - يعين خصائص "الشبكة-قوالب-الصفوف" و "شبكة-قالب-أعمدة" على القيم المقابلة ، وخاصية "شبكة-قالب-مناطق" على "لا شيء"

يمكنك استخدام صيغة أكثر تعقيدًا ، ولكن في نفس الوقت أكثر ملاءمة لتحديد قيم جميع الخصائص الثلاث:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

هذا يعادل ما يلي:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

نظرًا لأن قالب الشبكة لا يعيد تعيين خصائص الشبكة الضمنية (مثل الشبكة الأعمدة التلقائية والصفوف الشبكية التلقائية والتدفق التلقائي للشبكة) ، وهو أمر مطلوب في معظم الحالات ، فمن المستحسن استخدام خاصية "الشبكة" بدلاً من ذلك.

فجوة العمود ، فجوة الصف ، فجوة عمود الشبكة ، فجوة صف الشبكة

تحدد هذه الخصائص حجم الخطوط. بمعنى آخر ، فإنها تحدد مقدار المسافة البادئة بين الأعمدة / الخطوط.

.container {
  /*  */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /*  */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

• <line-size> - مقدار المسافات البادئة

مثال:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  column-gap: 10px;
  row-gap: 15px;
}

يتم إنشاء الحشو فقط بين الأعمدة / الصفوف ، وليس على طول حواف الشبكة.



لاحظ أنه تمت إعادة تسمية خصائص "شبكة-عمود-فجوة" و "شبكة-صف-فجوة" الآن إلى "فجوة عمود" و "فجوة صف".

فجوة ، فجوة الشبكة

هذه الخاصية هي اختصار لفجوة الصفوف وفجوة العمود.

.container {
  /*  */
  gap: <grid-row-gap> <grid-column-gap>;

  /*  */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

• <الشبكة-row-gap> <الشبكة- العمود- الفجوة> - أحجام الحشو

مثال:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  gap: 15px 10px;
}

إذا لم يتم تعيين قيمة خاصية "فجوة الصف" ، يتم تعيينها إلى قيمة خاصية "فجوة العمود".



لاحظ أنه تمت إعادة تسمية الخاصية "grid-gap" إلى "gap".

تبرير العناصر

تحدد هذه الخاصية محاذاة العناصر في الخلايا على طول محور الخط (الأفقي) (على عكس خاصية "محاذاة العناصر" ، التي تحدد المحاذاة على طول محور الكتلة (العمود ، الرأسي)). تنطبق قيمة هذه الخاصية على جميع العناصر الموجودة في الحاوية.

.container {
  justify-items: start | end | center | stretch;
}

• البداية - يتم نقل العناصر إلى بداية خلاياها (الحد الأيسر)
• النهاية - يتم إزاحة العناصر إلى نهاية الخلايا (الحد الأيمن)
• المركز - العناصر تتركز
• امتداد - تملأ العناصر العرض الكامل للخلايا

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

يتم التحكم في موضع عنصر فردي على طول محور صف الخلية بواسطة خاصية "justify-self".

محاذاة العناصر

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

.container {
  align-items: start | end | center | stretch;
}

• البداية - يتم نقل العناصر إلى بداية خلاياها (الحد العلوي)
• النهاية - يتم إزاحة العناصر إلى نهاية الخلايا (الحد السفلي)
• مركز - العناصر تتم توسيطها
• تمتد - العناصر تملأ الارتفاع الكامل للخلايا

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

يتم التحكم في موضع عنصر فردي على طول محور عمود الخلية بواسطة خاصية "align-self".

مكان العناصر

هذه الخاصية هي اختصار لمحاذاة العناصر وضبط العناصر.

.container {
  place-items: <align-items> <justify-items>;
}

• <align-items> <justify-items> هي القيمة الأولى لعناصر المحاذاة والثانية لعناصر الضبط. في حالة عدم وجود قيمة ثانية ، يتم تعيين القيمة الأولى لكلا الخاصيتين.

مثال:

.container {
  place-items: center start;
}

يتم توسيط العناصر على طول محور العمود وعند الأصل على طول محور الخط.

ضبط المحتوى (محاذاة العمود)

في بعض الأحيان يكون العرض الإجمالي لعناصر الشبكة (أعمدتها) أقل من عرض الحاوية. يمكن أن يحدث هذا عند تحديد عناصر ذات حجم ثابت (باستخدام px ، على سبيل المثال). في هذه الحالة ، يمكننا تحديد ترتيب أعمدة الشبكة في الحاوية. تحدد هذه الخاصية محاذاة الشبكة على طول محور الخط - محاذاة الأعمدة (على عكس خاصية "محاذاة المحتوى" ، التي تحدد محاذاة الشبكة على طول محور المربع (العمود) - محاذاة الصفوف).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• بدء - ينقل الشبكة إلى بداية الحاوية (الحد الأيسر)
• النهاية - ينقل الشبكة إلى نهاية الحاوية (الحد الأيمن)
• مركز - الشبكة متمركزة
• stretch — ,
• space-around — ,
• space-between — , — ,
• space-evenly — ,

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

.container {
  justify-content: space-around;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-evenly;
}

align-content ( )

في بعض الأحيان يكون الارتفاع الإجمالي لعناصر الشبكة (صفوفها) أقل من ارتفاع الحاوية. يمكن أن يحدث هذا عند تحديد عناصر ذات حجم ثابت (باستخدام px ، على سبيل المثال). في هذه الحالة ، يمكننا تحديد ترتيب صفوف الشبكة في الحاوية. تحدد هذه الخاصية محاذاة الشبكة على طول محور المربع (العمود) - محاذاة الصفوف (على عكس خاصية "ضبط المحتوى" ، التي تحدد محاذاة الشبكة على طول المحور المضمن - محاذاة الأعمدة).

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• بدء - ينقل الشبكة إلى بداية الحاوية (الحد العلوي)
• النهاية - ينقل الشبكة إلى نهاية الحاوية (الحد السفلي)
• مركز - الشبكة متمركزة
• التمدد - يتم شد الخطوط بحيث تأخذ الشبكة الارتفاع الكامل للحاوية
• space-around - مسافة متساوية بين الخطوط ونصف المسافة حول حواف الحاوية
• المسافة بين - يتم نقل السطر الأول إلى بداية الحاوية ، والأخير - حتى النهاية ، يتم توزيع المساحة الخالية بالتساوي بين بقية الخطوط
• مسافة متساوية - مسافة متساوية بين الخطوط وعند حواف الحاوية

.container {
  align-content: start;
}

.container {
  align-content: end;
}

.container {
  align-content: center;
}

.container {
  align-content: stretch;
}

.container {
  align-content: space-around;
}

.container {
  align-content: space-between;
}

.container {
  align-content: space-evenly;
}

مكان المحتوى

هذه الخاصية هي اختصار لمحاذاة المحتوى وتبرير المحتوى.

.container {
  place-content: <align-content> <justify-content>;
}

• <align-content> <justify-content> هي القيمة الأولى لمحاذاة المحتوى ، والثانية هي لضبط المحتوى. في حالة عدم وجود قيمة ثانية ، يتم تعيين القيمة الأولى لكلتا الخاصيتين.

مثال:

.container {
  place-content: center start;
}

يتم توسيط الصفوف في الحاوية ، وتكون الأعمدة في البداية.

أعمدة الشبكة التلقائية ، صفوف الشبكة التلقائية (حجم المسارات الضمنية)

تحدد هذه الخصائص حجم المسارات التي تم إنشاؤها تلقائيًا (المسارات الضمنية). يتم إنشاء المسارات الضمنية عندما يكون هناك عناصر أكثر من الخلايا في الشبكة ، أو عندما يتم وضع عنصر خارج الشبكة.

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

• <track-size> - الطول أو النسبة المئوية أو كسور المساحة الخالية للشبكة (باستخدام وحدة "fr")

مثال:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

هذا يخلق شبكة 2x2.



لنفترض أننا نستخدم خصائص "network-column" و "network-row" لوضع العناصر على النحو التالي:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

يبدأ العنصر بالفئة "item-b" بالسطر العمودي 5 وينتهي بالخط العمودي 6 ، لكننا لم نحدد هذه الخطوط. نظرًا لأننا نشير إلى خطوط غير موجودة ، يتم إنشاء مسارات ضمنية ذات عرض صفري لملء المسافات البادئة. يمكننا استخدام خاصية "grid-auto-column" لتحديد عرض المسارات الضمنية:

.container {
  grid-auto-columns: 60px;
}

شبكة التدفق التلقائي

يمكن استخدام خوارزمية الوضع التلقائي لوضع العناصر خارج الشبكة. تحدد الخاصية قيد النظر كيفية عمل هذه الخوارزمية.

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

• صف (افتراضي) - تملأ الخوارزمية الصف الحالي إلى الحد الأقصى ، وإذا لزم الأمر ، عندما لا يكون عرض الصف الحالي كافيًا ، تنشئ صفًا جديدًا
• العمود - تملأ الخوارزمية العمود الحالي إلى الحد الأقصى ، وإذا لزم الأمر ، عندما لا يكون ارتفاع العمود الحالي كافيًا ، تنشئ عمودًا جديدًا
• تعبئة ذكية كثيفة للشبكة عندما تكون هناك عناصر ذات أحجام مختلفة

لاحظ أن الكثافة تغير الترتيب المرئي للعناصر ، مما قد يضر بإمكانية الوصول.



لنفترض أن لدينا الترميز التالي:

  <section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

نحدد شبكة بخمسة أعمدة وصفين ونضبط خاصية "network-auto-flow" على "row" (وهو الوضع الافتراضي):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

عند وضع العناصر في الشبكة ، نضع عنصرين فقط:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

نظرًا لأن قيمة خاصية "grid-auto-flow" هي "صف" ، فإن شبكتنا تبدو مثل تلك الموضحة في الصورة أدناه. انتبه إلى ترتيب العناصر مع الفئات "item-b" و "item-c" و "item-d" (يتم إعطاء الأفضلية للصفوف):







إذا قمت بتغيير قيمة الخاصية "grid-auto-flow" إلى "العمود" ، ستبدو الشبكة هكذا الطريقة (يتم إعطاء الأفضلية للأعمدة):

جريد

هذه الخاصية هي اختصار لصفوف الشبكة ، وأعمدة قالب الشبكة ، ومناطق قالب الشبكة ، وصفوف الشبكة التلقائية ، وأعمدة الشبكة التلقائية ، والتدفق التلقائي للشبكة (لاحظ أن إعلانًا واحدًا قد يحتوي على فقط الخصائص "الصريحة" أو "الضمنية").

• لا شيء - تقبل جميع الخصائص القيم الافتراضية
• <grid-template> - مشابه لاختصار قالب الشبكة
• <grid-template-rows> / [تدفق تلقائي && كثيف؟] <شبكة- تلقائية- أعمدة>؟ - يحدد قيمة لصفوف الشبكة. إذا كانت الكلمة الرئيسية "auto-flow" موجودة على يمين الشرطة المائلة ، فإن قيمة خاصية "network-auto-flow" تصبح "عمود". إذا تم تحديد الكلمة الأساسية "كثيف" بالإضافة إلى التدفق التلقائي ، فإن خوارزمية التداخل التلقائي تحزم العناصر وفقًا لذلك. إذا تم حذف قيمة خاصية "الشبكة-الأعمدة التلقائية" ، تصبح قيمتها "تلقائية"
• [تدفق تلقائي && كثيف؟] <الشبكة-السيارات- الصفوف>؟ / <grid-template-columns> - يحدد قيمة أعمدة الشبكة. إذا كانت الكلمة الرئيسية "auto-flow" موجودة على يسار الشرطة المائلة ، فإن قيمة خاصية "network-auto-flow" تصبح "صف". إذا تم تحديد الكلمة الأساسية "كثيف" بالإضافة إلى التدفق التلقائي ، فإن خوارزمية التداخل التلقائي تحزم العناصر وفقًا لذلك. إذا تم حذف قيمة الخاصية "grid-auto-rows" ، تصبح قيمتها "auto"

كتلتا التعليمات البرمجية التاليتان متساويتان:

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

كتلتا التعليمات البرمجية التاليتان متساويتان:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

كتلتا التعليمات البرمجية التاليتان متساويتان:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

وكتلتا الكود التاليتان متساويتان أيضًا:

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

في هذه الحالة ، يمكننا استخدام بنية أكثر تعقيدًا ، ولكن في نفس الوقت أكثر ملاءمة لتعريف خصائص "الشبكة-قوالب-مناطق" و "صفوف-قوالب الشبكة" و "شبكة-قالب-أعمدة" في وقت واحد وتعيين خصائص أخرى على القيم الافتراضية ... ما عليك القيام به هو تحديد أسماء الخطوط وأحجام المسارات مع المناطق المقابلة في سطر واحد. يسهل توضيح ذلك بمثال:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

هذا يعادل ما يلي:

.container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

خصائص عنصر الشبكة

لاحظ أن الخصائص تعويم ، وعرض: كتلة مضمنة ، وعرض: خلية جدول ، ومحاذاة عمودية ، وعمود- * المطبقة على عنصر شبكة ليس لها تأثير.

بداية عمود الشبكة ، نهاية عمود الشبكة ، بداية صف الشبكة ، نهاية صف الشبكة

تحدد هذه الخصائص موضع عنصر في الشبكة عن طريق الانجذاب إلى خطوط معينة. بداية عمود الشبكة / بداية صف الشبكة هي خطوط البداية للعنصر ، وشبكة نهاية العمود / نهاية صف الشبكة هي خطوط النهاية.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

• <line> - يمكن أن يكون رقمًا (محاذاة لرقم السطر) أو اسمًا (محاذاة إلى اسم السطر)
• تمتد <number> - سيتم تمديد العنصر لعدد محدد من المسارات
• امتداد <name> - سيتمدد العنصر حتى يصل إلى السطر الذي يحمل الاسم المحدد
• تلقائي - تخطيط تلقائي ، توسيع تلقائي أو امتداد عمود واحد افتراضي

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

إذا لم يتم تحديد قيم خصائص شبكة عمود نهاية / شبكة صف نهاية ، سيشغل العنصر مسارًا واحدًا بشكل افتراضي.



يمكن أن تتداخل العناصر مع بعضها البعض. يمكنك استخدام خاصية z-index للتحكم في ترتيب تكديس العناصر.

عمود الشبكة ، صف الشبكة

هذه الخصائص هي اختصار لبداية عمود الشبكة + نهاية عمود الشبكة وشبكة بداية الصف + نهاية صف الشبكة ، على التوالي.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

• <start-line> / <end-line> - القيم هي نفس الخصائص الأصلية ، بما في ذلك الامتداد

مثال:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

إذا لم يتم تحديد خط نهاية ، فسيتم تعيين العنصر افتراضيًا على مسار واحد.

منطقة الشبكة

تحدد هذه الخاصية اسم العنصر ، والذي يتم استخدامه كقيمة في خاصية الشبكة-قوالب-مناطق. يمكن أيضًا استخدام منطقة الشبكة كاختصار لبدء صف الشبكة + بداية عمود الشبكة + نهاية صف الشبكة + نهاية عمود الشبكة.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

• <name> - اسم عشوائي للعنصر
• يمكن أن يكون <row-start> / <column-start> / <row-end> / <column-end> - أرقامًا أو أسماء أسطر

تسمية عنصر:

.item-d {
  grid-area: header;
}

اختصار لشبكة-صف-بداية + شبكة-عمود-بداية + شبكة-صف-نهاية + شبكة-عمود-نهاية:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

تبرير الذات

تحدد هذه الخاصية محاذاة عنصر في خلية على طول محور الصف (على عكس خاصية المحاذاة الذاتية ، التي تحدد المحاذاة على طول محور المربع (العمود)). تنطبق هذه الخاصية على عنصر داخل خلية واحدة.

.item {
  justify-self: start | end | center | stretch;
}

• البدء - يتم نقل العنصر إلى بداية الخلية (الحد الأيسر)
• النهاية - ينتقل العنصر إلى نهاية الخلية (الحد الأيمن)
• المركز - يتركز العنصر
• امتداد - يملأ العنصر عرض الخلية بالكامل

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

يتم استخدام خاصية justify-items للتحكم في محاذاة كافة عناصر الشبكة على طول محور الخط.

محاذاة الذات

تحدد هذه الخاصية محاذاة عنصر في خلية على طول محور المربع (العمود) (على عكس خاصية ضبط النفس ، التي تحدد المحاذاة على طول محور الصف). تنطبق هذه الخاصية على عنصر داخل خلية واحدة.

.item {
  align-self: start | end | center | stretch;
}

• البدء - يتم نقل العنصر إلى بداية الخلية (الحد العلوي)
• النهاية - ينتقل العنصر إلى نهاية الخلية (الحد السفلي)
• المركز - يتركز العنصر
• امتداد - يملأ العنصر ارتفاع الخلية بالكامل

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

يتم استخدام خاصية محاذاة العناصر للتحكم في محاذاة جميع عناصر الشبكة على طول محور الكتلة (العمود).

مكان الذات

هذه الخاصية هي اختصار لـ align-self و justify-self.

• القيمة الافتراضية التلقائية
• <align-self> / <justify-self> هي القيمة الأولى لـ align-self ، والثانية لـ justify-self. إذا تم حذف القيمة الثانية ، فسيتم تطبيق القيمة الأولى على كلا الخاصيتين

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

• , px, rem, % .., , min-content, max-content, auto , , — (fr). grid-template-columns: 200px 1fr 2fr min-content
• , . , , 1fr, 200px: grid-template-columns: 1fr minmax(200px, 1fr)
• repeat() : grid-template-columns: repeat(10, 1fr) ( , 1fr)
• يتيح لك الجمع بين هذه الميزات تحقيق مرونة تخطيط مذهلة ، على سبيل المثال: أعمدة قالب الشبكة: كرر (الملء التلقائي ، minmax (200 بكسل ، 1fr)) (من المثال الموجود في بداية قسم الشبكة)

موارد مفيدة

• تخصيص
• MDN
• ورقة غش الشبكة
• حديقة الشبكة

الدعم

الدورة التعليمية

في هذا البرنامج التعليمي ، سننشئ مدربًا بسيطًا لخصائص Flexbox الأساسية.

وضع علامة على

<main>
  <div id="controls">
    <div id="buttons">
      <button data-btn="addBtn">Add Item</button>
      <button data-btn="removeBtn">Remove Item</button>
    </div>
    <fieldset id="flexContainerProps">
      <legend>Flex Container Props</legend>
      <label for="flexDirection">flex-direction</label>
      <select id="flexDirection">
        <option value="row" selected>row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>

      <label for="flexWrap">flex-wrap</label>
      <select id="flexWrap">
        <option value="nowrap">nowrap</option>
        <option value="wrap" selected>wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>

      <label for="justifyContent">justify-content</label>
      <select id="justifyContent">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>

      <label for="alignItems">align-items</label>
      <select id="alignItems">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>

      <label for="alignContent">align-content</label>
      <select id="alignContent">
        <option value="flex-start" selected>flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>
    </fieldset>

    <fieldset id="flexItemProps">
      <legend>Flex Item Props</legend>
      <label for="order">order</label>
      <input
        id="order"
        type="number"
        min="-5"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexGrow">flex-grow</label>
      <input
        id="flexGrow"
        type="number"
        min="0"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexShrink">flex-shrink</label>
      <input
        id="flexShrink"
        type="number"
        min="1"
        max="6"
        step="1"
        value="1"
      />

      <label for="alignSelf">align-self</label>
      <select id="alignSelf">
        <option value="auto" selected>auto</option>
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>
    </fieldset>
  </div>

  <div id="flexContainer">
    <div class="flex-item selected">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 class="flex-item">6</div>
  </div>
</main>

لدينا هنا حاوية مرنة بها ستة عناصر مرنة وعناصر تحكم للتحكم في التبديل بين خصائص flexContainerProps وعناصر flexItemProps المحددة. في الحاوية الثانية أيضًا ، لدينا زرين: أحدهما لإضافة عنصر إلى الحاوية المرنة (addBtn) ، والآخر لإزالة آخر عنصر مرن (removeBtn).

الأنماط

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

#controls {
  margin-right: 0.4rem;
}

#buttons {
  margin: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  margin: 0.2rem;
}

label {
  display: block;
  margin: 0.4rem;
}

select {
  width: 100%;
}

#flexContainer {
  width: 600px;
  height: 600px;
  border: 1px dashed #222;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  min-width: 178px;
  min-height: 178px;
  background: radial-gradient(circle, yellow, orange);
  border: 1px solid #222;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #222;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.flex-item:nth-child(2n) {
  min-width: 158px;
  min-height: 158px;
}

.flex-item:nth-child(3n) {
  min-width: 198px;
  min-height: 198px;
}

.flex-item.selected {
  background: radial-gradient(circle, lightgreen, darkgreen);
}

يجب أن تكون العناصر المرنة بأحجام مختلفة ومرنة في نفس الوقت. نحقق ذلك مع min-width / min-height و nth-child. العنصر المحدد من فئة "محدد" بلون خلفية مختلف.

النصي

//    
const controls = document.querySelector('#controls')
const buttons = document.querySelector('#buttons')
const flexContainer = document.querySelector('#flexContainer')

//   
buttons.addEventListener('click', (e) => {
  //     
  if (e.target.tagName !== 'BUTTON') return

  //   
  const { btn } = e.target.dataset

  switch (btn) {
    //        -
    case 'addBtn':
      //     6 
      //      -
      //    
      const num = document.querySelectorAll('.flex-item').length + 1
      // ,      7 
      //   
      if (num < 7) {
        //    "div"
        const newItem = document.createElement('div')
        //    
        newItem.className = 'flex-item'
        //  
        newItem.textContent = num
        //    -
        flexContainer.append(newItem)
      }
      break
    //      -
    case 'removeBtn':
      //    
      const index = document.querySelectorAll('.flex-item').length - 1
      // ,      0
      //      -
      if (index > 0) {
        //  ,  
        const itemToRemove = document.querySelectorAll('.flex-item')[index]
        //   
        itemToRemove.remove()
      }
      break
  }
})

//     
controls.addEventListener('change', (e) => {
  //    
  const prop = e.target.id
  //    
  const value = e.target.value

  // ,   
  //  -    -
  //      
  if (e.target.parentElement.id === 'flexContainerProps') {
    flexContainer.style[prop] = value
  } else {
    const selectedItem = document.querySelector('.selected')
    selectedItem.style[prop] = value
  }
})

//   -
flexContainer.addEventListener('click', (e) => {
  //        -
  if (
    e.target.className !== 'flex-item' ||
    e.target.classList.contains('selected')
  )
    return

  //     "selected"    
  if (document.querySelector('.selected') !== null)
    document.querySelector('.selected').classList.remove('selected')

  //      
  e.target.classList.add('selected')

  //   -      "-"
  //       
  //      -
  //    
  //   ,     

  //         
  //         -
  const getStyle = (property, element = e.target) =>
    getComputedStyle(element).getPropertyValue(property)

  //  ,      DOM-,   "id", 
  //  ,     
  order.value = getStyle('order')
  flexGrow.value = getStyle('flex-grow')
  flexShrink.value = getStyle('flex-shrink')
  alignSelf.value = getStyle('align-self')
})

كما ترون ، لا شيء معقد. بالطبع ، وظائف المحاكاة الناتجة محدودة للغاية. ومع ذلك ، أفترض أن هذا كافٍ لفهم كيفية عمل الخصائص الأساسية لـ Flexbox.



أوصي بمحاولة إنشاء جهاز محاكاة مشابه بناءً على الخصائص الأساسية للشبكة - ستكون هذه ممارسة ممتازة وستتيح لك فهم كل شيء بشكل صحيح.







قد تجد أيضًا أحد مشاريعي الحديثة مثيرًا للاهتمام ، وهو Modern HTML Starter Template .



شكرا لك على اهتمامك واستمتع بيومك.