Justify-content vs Align-Items في Flexbox

لقد كتبت الإعلان display: flex مرات أكثر مما أستطيع إحصاؤه، وما زلت أنسى أحيانًا ما إذا كان الأمر كذلك justify-content أو align-items الذي يتحكم في المحور الرأسي على التوالي. هذا ليس جهل؛ إنها الحقيقة الصادقة لنموذج التخطيط الذي ينقلب سلوكه اعتمادًا على flex-direction. عندما يكون الاتجاه row، justify-content يعمل أفقيا. التبديل إلى column ونفس الخاصية تعمل الآن عموديًا. أي شخص يدعي أنه لم يفتح أبدًا أدوات تطوير المتصفح لدفع هذه القيم حتى تصل الصناديق إلى المكان الذي يريده إما أن يكون مستلقيًا أو لديه ذاكرة أفضل بكثير من ذاكرتي.

ال مولد فليكس بوكس هي الأداة التي كنت أتمنى لو كانت لدي عندما كنت أتعلم هذا النموذج، والأداة التي ما زلت أصل إليها عندما أريد إنشاء نموذج أولي لتخطيط دون لمس ورقة الأنماط. تقوم بتعيين خصائص الحاوية، وصف من صناديق العينات التي تتدفق مرة أخرى في الوقت الفعلي، ويوجد CSS الدقيق الذي ينتج ما تراه في مربع جاهز للنسخ أسفله. يتحول &quot؛ تذكر أي خاصية تفعل ماذا واقتباس؛ في &quot؛ انقر حتى يبدو صحيحًا، ثم اقرأ الإجابة.&quot؛

ليرة تركية؛DR: Flexbox هو نموذج تخطيط أحادي البعد. الحاوية تقودها من خلال ست خصائص: flex-direction، flex-wrap، justify-content، align-items، align-content، و gap. يعرض هذا المولد كل هذه العناصر، ويعرض معاينة مباشرة، ويصدر CSS نظيفًا. نظرًا لأن المعاينة تعرض نفس الإعلانات التي تخرجها، فإن ما تراه هو بالضبط ما تلصقه. يتم تشغيله بالكامل في متصفحك بدون تسجيل.

ما هي المشكلة التي يحلها مولد flexbox؟

Flexbox قوي على وجه التحديد لأنه نسبي. أنت تصف النية (&quot؛ انشر هذه العناصر بمسافة متساوية بينها، &quot؛ &quot؛ ركز هذا على كلا المحورين وquot؛) ويقوم المتصفح بحساب وحدات البكسل. لكن من الصعب الاحتفاظ بالأنظمة النسبية في رأسك، لأن تأثير كل خاصية يعتمد على حالة الخصائص الأخرى. align-content لا يفعل شيئًا حتى تلتف العناصر. يتم تبديل المحور الرئيسي والمحور المتقاطع عند تغيير الاتجاه. space-between و space-around تبدو متشابهة حتى تقارنها جنبًا إلى جنب.

أسرع طريقة لبناء الحدس لنظام نسبي هي التعامل معه ومشاهدته. يقوم المولد بتقسيم حلقة التحرير والحفظ والتحديث إلى تفاعل واحد: قم بتغيير القائمة المنسدلة، وشاهد المربعات تتحرك. بعد عشر دقائق من المعاينة المباشرة، تتوقف الخاصية التي تتحكم في المحور المتقاطع عن كونها حقيقة تحفظها وتصبح شيئًا تشعر به. وعندما تنتهي من الاستكشاف، لن تترك لديك ملاحظة ذهنية لتدوينها؛ CSS العامل مكتوب بالفعل لك.

ما هي خصائص التحكم في الحاوية؟

يقوم Flexbox بتقسيم المسؤولية بين الحاوية وعناصرها. تقرر الحاوية الترتيب العام، وهذا هو المكان الذي يركز عليه المولد لأنه المكان الذي تعيش فيه معظم قرارات التخطيط. إليك ما تفعله كل خاصية حاوية.

ملكية	ما يتحكم فيه	القيم المشتركة
flex-direction	المحور الرئيسي واتجاهه	row، column، row-reverse، column-reverse
flex-wrap	ما إذا كانت العناصر تتدفق إلى خطوط جديدة	nowrap، wrap، wrap-reverse
justify-content	التباعد على طول المحور الرئيسي	flex-start، center، space-between، space-evenly
align-items	تحديد المواقع على المحور المتقاطع	stretch، center، flex-start، baseline
align-content	تباعد الخطوط المغلفة على المحور المتقاطع	stretch، center، space-between
gap	المسافة بين العناصر	أي طول، على سبيل المثال 16px

النموذج العقلي الذي يصنع هذه العصا هو فكرة المحورين من المواصفات. تتدفق العناصر على طول المحور الرئيسي، والذي flex-direction مجموعات. المحور المتقاطع يكون دائمًا متعامدًا معه. justify-content يوزع الفضاء على المحور الرئيسي؛ align-items المواقف على المحور المتقاطع. مرة واحدة flex-direction يكون column، المحور الرئيسي عمودي، لذلك justify-content الآن يقوم بتكديس العناصر من أعلى إلى أسفل و align-items يضعهم من اليسار إلى اليمين. لم يتغير شيء في الخصائص؛ دارت المحاور تحتها.

كيف يمكنني توسيط div باستخدام flexbox؟

هذا هو السؤال المرن الأكثر بحثًا، والإجابة هي ثلاثة أسطر. اضبط الحاوية على display: flexإذن justify-content: center و align-items: center. أن يتمركز الطفل على المحور الرئيسي والمحور المتقاطع مرة واحدة، وهو ما يعني بالنسبة للصف الافتراضي المركز الميت أفقيًا وعموديًا.

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

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

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

متى يكون محتوى المحاذاة مهمًا؟

align-content هل تم تعيين الخاصية من قبل الأشخاص ثم يتساءلون لماذا لا يحدث شيء. الجواب في المواصفات: فهو يؤثر فقط على التخطيط عندما يكون هناك أسطر متعددة من العناصر المرنة. مع flex-wrap: nowrap، كل عنصر يقع في سطر واحد، لذلك لا توجد مجموعة من الخطوط للتوزيع، والخاصية خاملة.

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

ما الفرق بين قيم المحتوى المبرر؟

ال justify-content الكلمات الرئيسية هي المكان الذي تحظى فيه المعاينة المباشرة بالاحتفاظ بها، لأن الاختلافات مكانية ويصعب وصفها نثرًا. flex-start حزم العناصر في بداية المحور الرئيسي. center حزمهم في المنتصف. space-between يدفع العنصرين الأول والأخير إلى الحواف ويوزع المساحة المتبقية بالتساوي بين العناصر الأخرى، لذلك لا توجد مساحة عند الحواف الخارجية. space-around يعطي كل عنصر مساحة متساوية على كلا الجانبين، مما يعني أن الفجوة بين عنصرين هي ضعف الفجوة عند الحواف. space-evenly يجعل كل فجوة متساوية، بما في ذلك الحواف.

قراءة تلك الفقرة لا تعلمك شيئًا تقريبًا. إن النقر فوق القيم الخمس مع وجود خمسة مربعات على الشاشة يعلمك في ثوانٍ، ولن تخلط أبدًا space-between مع space-around مرة أخرى بمجرد رؤية سلوك الحافة جنبًا إلى جنب. هذه هي الحجة لبناء التخطيط عن طريق التلاعب وليس عن طريق الحفظ، وهي نفس الحجة وراء إبقاء مجموعة من أدوات CSS المرئية قريبة: مولد التدرج و ال مولد الظل الصندوقي توجد لنفس السبب، لأن الاتصال بالتدرجات والظلال أسهل أيضًا عن طريق العين من الكتابة بالعمى. الحالة الأوسع لتجميع هذا النوع من مجموعة الأدوات موجودة في هذه القطعة على مجموعة أدوات مطور الويب.

Flexbox أو CSS Grid؟

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

في المشاريع الحقيقية يعششون باستمرار. تحدد الشبكة مناطق الصفحة، وتقوم الحاوية المرنة بترتيب العناصر داخل إحدى تلك المناطق. تعلم flexbox جيدًا لا يجعل الشبكة زائدة عن الحاجة والعكس صحيح؛ يجعلك تتقن الأداة التي تناسب كل وظيفة. المولد هو طريقة سريعة للوصول إلى تلك الطلاقة للحالة أحادية البعد، وبمجرد أن تكون خصائص الحاوية ذات طبيعة ثانية، فإن قراءة وكتابة التخطيطات المرنة يدويًا تتوقف عن الحاجة إلى مرجع.

كيف يمكنني استخدام مولد Flexbox؟

يعكس التدفق طريقة تفكيرك في التخطيط.

1. يختار flex-direction وما إذا كان يجب أن تلتف العناصر. وهذا يحدد المحاور وسلوك الفائض، ويعتمد القراران على كل شيء آخر.
2. ضبط المحاذاة. يضبط justify-content على المحور الرئيسي و align-items على المحور العرضي حتى تتطابق المعاينة مع الترتيب الموجود في رأسك.
3. تباعد اللحن. ضبط gap بين العناصر التي تحتوي على شريط التمرير، وعند تشغيل التغليف، قم بتعيينها align-content لتباعد الخطوط.
4. انسخ CSS. تستهدف القاعدة التي تم إنشاؤها أ .container الفصل والتحديثات مباشرة. انسخه بنقرة واحدة والصقه في ورقة الأنماط الخاصة بك.

يمكنك أيضًا إضافة عناصر المعاينة أو إزالتها لاختبار كيفية تصرف التخطيط ضمن محتوى مختلف. أ space-between يبدو Navbar جيدًا مع ثلاثة عناصر ومختلفًا تمامًا مع سبعة عناصر تلتف، والقدرة على تغيير العدد أثناء المشاهدة هي الطريقة التي يمكنك بها التقاط ذلك قبل أن يصل إلى الإنتاج.

هل تحل الفجوة محل هوامش التباعد؟

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

يعالج المولد gap كعنصر تحكم من الدرجة الأولى مع شريط تمرير البكسل، فإنه يحذف الإعلان عندما تكون الفجوة صفرًا وبالتالي يظل الإخراج في حده الأدنى. لأعمال الإنتاج، gap يتم دعم الحاويات المرنة بشكل جيد عبر المتصفحات الحالية، لذلك نادرًا ما يكون هناك سبب للعودة إلى نهج الهامش. إذا كنت تقوم بتحويل قيمة تباعد بين الوحدات أثناء العمل، فإن محول وحدة CSS يعالج px إلى rem الحساب بدون آلة حاسبة.

ما هي حدود CSS التي تم إنشاؤها؟

ينتج المولد قاعدة الحاوية. لا يقوم بتعيين خصائص لكل عنصر مثل flex-grow، flex-shrink، أو flex-basis، والتي تتحكم في كيفية توسع العناصر الفردية وتقلصها لملء المساحة. هذه هي القرارات على مستوى العنصر التي تعتمد على المحتوى المحدد الخاص بك، وبالنسبة لمعظم التخطيطات، خصائص الحاوية بالإضافة إلى ذلك flex: 1 كل ما تحتاجه هو العناصر التي يجب أن تنمو. عندما تحتاج إلى تحكم جيد لكل عنصر، تظل قاعدة الحاوية التي تم إنشاؤها هي الأساس الصحيح للبناء عليه.

يستخدم الإخراج خصائص قياسية غير مسبوقة. كانت هناك حاجة إلى بادئات البائع لـ flexbox للمتصفحات التي لم تعد مدعومة لسنوات، لذلك لا ينبغي أن تحملها ورقة الأنماط الحديثة، وإضافتها اليوم هي ضوضاء. إن CSS الذي تم إنشاؤه جاهز للإنتاج كما هو مكتوب، وهذه هي النقطة: تترك مع قاعدة يمكنك لصقها، وليس رسمًا تخطيطيًا للبدء عليك الانتهاء منه. بالنسبة للمجموعة الأوسع من الأدوات المساعدة الصغيرة التي تجعل الواجهة الأمامية تعمل بشكل أسرع، فإن هذه القائمة المتهدمة أدوات إنتاجية المطور هو رفيق جيد، كما هو الحال دليل مولد التدرج إذا كان CSS المرئي هو الجزء الذي تريد تسريعه.

ما هي التخطيطات المشتركة التي يمكنني البناء بها؟

تغطي مجموعة من الوصفات معظم أعمال flexbox اليومية، وكل منها عبارة عن بضع نقرات في المولد. يوجد شريط تنقل به شعار على اليسار وروابط على اليمين justify-content: space-between مع align-items: center على صف. بطل مركزي تمامًا، الكلاسيكي &quot؛ مركز مربع على الصفحة، والاقتباس؛ هو justify-content: center و align-items: center. كومة رأسية من حقول النموذج هي flex-direction: column مع أ gap لتباعد ثابت، وهو أنظف من الهوامش في كل حقل. صف سريع الاستجابة من البطاقات يلتف على خطوط جديدة على شاشات ضيقة هو صف به flex-wrap: wrap و أ gapإذن flex: 1 على البطاقات نفسها حتى تنمو لملء الصف.

تكمن قيمة إنشاء هذه العناصر في المولد بدلاً من نسخها من الذاكرة في أنك ترى حالات الحافة على الفور. أ space-between navbar مع عنصر واحد فقط يقوم بتثبيت هذا العنصر في البداية، والذي يمكن أن يبدو وكأنه خطأ حتى تفهم ذلك space-between ليس لديه ما يوزعه مع عنصر واحد. يتصرف صف بطاقة التغليف بشكل مختلف عند بطاقتين مقابل ستة، ويتيح لك عدد العناصر القابلة للتعديل للمعاينة &#39 التحقق من كليهما قبل الشحن. إن إنشاء التخطيط عن طريق التلاعب يعني ظهور الحالات المفاجئة أثناء وجودك في الأداة، وليس بعد أن يقوم المستخدم بالإبلاغ عنها.

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

أسئلة وأجوبة

ما هو مولد الصندوق المرن CSS؟

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

كيف يمكنني توسيط div باستخدام flexbox؟

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

ما الفرق بين تبرير المحتوى ومحاذاة العناصر؟

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

متى يكون لمحتوى المحاذاة تأثير؟

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

ماذا تفعل خاصية الفجوة في flexbox؟

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

ما الفرق بين المرن والمرن المضمن؟

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

هل يحل flexbox محل CSS Grid؟

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

هل CSS الذي تم إنشاؤه آمن للاستخدام في الإنتاج؟

نعم. يتم دعم Flexbox في كل متصفح حديث وتصدر الأداة خصائص CSS قياسية وغير مسبوقة. تتم جميع عمليات المعالجة في متصفحك، لذلك لا يتم تحميل أي شيء وتعمل الأداة دون اتصال بالإنترنت بمجرد تحميلها.