محرر Flexbox

ما محرّر Flexbox المرئيّ؟#

Flexbox هو محرّك تخطيط CSS لترتيب العناصر على امتداد اتجاه واحد (صفّ أو عمود) وتوزيع المساحة الحرّة بينها. يُجيب عن أسئلة كانت تتطلّب عائمات (floats) وهوامش سالبة وتجربة-وخطأ: «كيف أُوسِط هذا عموديًّا؟»، «كيف أجعل هذه الأعمدة الثلاثة متساوية الارتفاع؟»، «كيف أدفع عنصرًا إلى أقصى اليمين بينما يبقى الباقي يسارًا؟». متى فهمته تلجأ إليه في كلّ صفحة تقريبًا؛ قبل ذلك، تُعثِر أسماء الخصائص (justify-content وalign-items وflex-grow) حتى المطوّرين المتمرّسين، لأنّ المواصفات تُثقِل كلمات إنجليزية عادية بدلالات تخطيط دقيقة جدًّا.

هذه الصفحة ساحة لعب Flexbox حيّة. تضبط خصائص الحاوية وتجاوزات كلّ عنصر في الشريط الجانبي الأيسر؛ تُظهر اللوحة اليمنى النتيجة فورًا وتكتب CSS الدقيق جاهزًا للّصق الذي أنتجها. الفكرة هي أن تتوقّف عن تخمين أيّ قيمة تفعل ماذا وبدلًا من ذلك ترى الأثر لحظة تغييرها — ثمّ تنسخ القاعدة التي عملت.

كيف تستخدمها#

التخطيط مقسَّم بين شريط جانبيّ للضوابط ولوحة معاينة + ناتج CSS.

1. اضبط الحاوية. استخدم القوائم المنسدلة في الشريط الجانبيّ:
   • الاتجاه — row، row-reverse، column، column-reverse.
   • توزيع المحتوى — يوزّع المساحة الحرّة على المحور الرئيسيّ: flex-start، center، flex-end، space-between، space-around، space-evenly.
   • محاذاة العناصر — يرتّب الأبناء على المحور المتعامد: stretch، flex-start، center، flex-end، baseline.
   • التفاف — nowrap يُبقي كلّ شيء على سطر واحد؛ wrap وwrap-reverse يسمحان للأبناء بالتدفّق إلى أسطر جديدة.
   • محاذاة المحتوى — يظهر فقط عندما يكون الالتفاف مُفعَّلًا؛ يُباعد أسطر الأبناء المُلتفَّة.
   • الفجوة — شريط تمرير من 0 إلى 64 px؛ تُقرأ القيمة الحيّة بجانب التسمية.
2. أدر العناصر. تحت ترويسة العناصر، يُدرج إضافة عنصر ابنًا مرنًا آخر. يكشف صفّ كلّ عنصر عن grow وshrink وbasis وorder وalign-self (تجاوز لكلّ ابن على align-items للحاوية). احذف ابنًا بزرّ حذف العنصر %n.
3. راقب المعاينة. الصندوق الكبير على اليمين حاوية مرنة حقيقيّة — كلّ تغيير يُعاد رسمه فورًا.
4. انسخ CSS. كتلة القاعدة المُولَّدة تجلس تحت المعاينة. انقر نسخ لأخذها. عندما تتشارك كلّ العناصر القيم نفسها، تُصدَر كتلة .item واحدة؛ للحظة أن يختلف أيّ عنصر، يبدّل الناتج إلى كتلة .item:nth-child(N) لكلّ ابن كي يبقى كلّ تجاوز غير ملتبس.

أبرز المزايا#

• خصائص الحاوية وكلّ ابن في مكان واحد. لا شيء في Flexbox مخفيًّا — flex-direction، وكلا محورَي المحاذاة، والالتفاف، وgap، وgrow/shrink/basis/order/align-self لكلّ عنصر، كلّها حيّة.
• ناتج CSS صحيح وأدنى. يُصدَر align-content فقط عندما يكون الالتفاف مُفعَّلًا فعلًا (لا يفعل شيئًا على سطر واحد)؛ تنهار العناصر المتساوية إلى كتلة واحدة؛ ويظهر order وalign-self فقط عند غير الافتراضيّ. الناتج هو أقصر قاعدة تُعيد إنتاج ما ترى.
• الاختصار flex، يُنفَّذ صح. يُتسلسل كلّ ابن كـ flex: <grow> <shrink> <basis> — الصيغة الثلاثيّة القيمة الأساسيّة التي تتجنّب المفاجآت الافتراضيّة لقيم الاختصار الناقصة.
• يُتحقَّق من flex-basis. اكتب auto أو 0 أو 200px أو 50% أو 10rem فتُقبَل؛ وflex-basis غير الصالح يُعلَّم ويرجع إلى auto بدل إنتاج CSS مكسور بصمت.
• المعاينة مُجبَرة من اليسار إلى اليمين. row لـ Flexbox معرَّفة بدلالات يسار-إلى-يمين، فتُثبَّت المعاينة LTR بصرف النظر عن لغة الصفحة — ما تراه يطابق ما سيفعله ملف أنماطك.

مثال عملي#

تخطيط شائع: صفّ ترويسة بشعار مُثبَّت يسارًا، وعنوان يأخذ المساحة المتبقّية، وإجراء مُثبَّت يمينًا — بمسافات متساوية وفجوة ثابتة.

• الاتجاه: row
• توزيع المحتوى: space-between
• محاذاة العناصر: center
• التفاف: nowrap
• الفجوة: 16px
• العناصر: ثلاثة أبناء، الأوسط بـ grow 1 كي يمتصّ المساحة الحرّة، والآخران على flex: 0 1 auto الافتراضيّ.

CSS المُولَّد:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

لأنّ الابن الثاني ينمو والآخرين لا، يستخدم الناتج بشكل صحيح ثلاث كتل nth-child منفصلة. أفلِت هذا في أيّ مشروع فيحتمي الشعار بالحافة اليسرى، ويحتمي الإجراء باليمنى، ويملأ العنوان الوسط — بلا عائمات ولا هوامش.

الأسئلة الشائعة#

justify-content مقابل align-items — أيّهما بأيّهما؟#

يعمل justify-content دائمًا على المحور الرئيسيّ (الاتجاه الذي يضبطه flex-direction — أفقيّ في row، عموديّ في column). يعمل align-items دائمًا على المحور المتعامد (العموديّ على المحور الرئيسيّ). ففي row، يتحكّم justify-content بالتباعد يمين/يسار ويتحكّم align-items بالمحاذاة أعلى/أسفل. اقلب الاتجاه إلى column فيتبادلان الأدوار. تذكَّر «justify = main, align = cross» يُنقذك من أكثر التباسات Flexbox شيوعًا.

متى يفعل flex-grow شيئًا فعلًا؟#

فقط عندما تكون هناك مساحة حرّة ليمتصّها. إذا كان لكلّ من ثلاثة أبناء flex-grow: 1 والحاوية أعرض ممّا يحتاج الأبناء، تُقسَّم المساحة المتبقّية إلى أثلاث وتُضاف بالتساوي. إن كانت الحاوية ممتلئة تمامًا فلا شيء ينمو. اضبط flex-grow: 0 (الافتراضيّ) فيرفض الابن التمدّد، تاركًا إخوته يأخذون المساحة بدلًا منه. flex-shrink هو المرآة: يُقرِّر من يتنازل عن مساحة أولًا حين لا توجد غرفة كافية.

لماذا لا تظهر gap خاصّتي؟#

ثلاثة أسباب معتادة: للأبناء عرض ثابت يملأ الحاوية تمامًا (لا غرفة للفجوات)، أو flex-wrap: nowrap يُجبر الأبناء على التدفّق بدل الالتفاف إلى التخطيط المدرك للفجوات، أو هامش على الأبناء يحجب الفجوة بصريًّا. يصل شريط التمرير هنا إلى 64 px؛ إن احتجت أكثر، فالخاصية الكامنة تقبل أيّ طول، فانسخ CSS وارفع gap في ملفك الخاص.

الناتج يستخدم nth-child — هل أستطيع استخدام صنف بدلًا من ذلك؟#

بالطبع. تُصدَر المُحدِّدات .item:nth-child(N) لأنّها تُطابق المعاينة بشكل غير ملتبس عندما تختلف العناصر. في الشيفرات الحقيقية، بدّلها بأصنافك الخاصة (.logo و.title و.action) — التصريحات في الداخل تبقى مطابقة. وعندما يطابق كلّ ابن، تُصدِر الأداة فعلًا كتلة .item مشتركة واحدة تُعيد تسميتها في مكان واحد.