كيفية توسيط Div في CSS (Flexbox)
أنشئ تخطيط CSS flexbox بشكل مرئي: الاتجاه المرن، وضبط المحتوى، ومحاذاة العناصر، والالتفاف المرن والفجوة في الحاوية، بالإضافة إلى النمو المرن لكل طفل، والتقليص المرن، والأساس المرن، كل ذلك مع معاينة مباشرة وCSS قابل للنسخ.
النتيجة
فيما يلي الإجابة المباشرة على السؤال الأكثر شيوعًا في CSS: لتوسيط div، ضع العرض: flex، وjustify-content: center، وalign-items: توسيط العنصر الأصلي. هذا كل شيء — ثلاثة إعلانات على الحاوية، ويجلس الطفل بشكل مثالي في المنتصف أفقيًا وعموديًا داخلها، بأي حجم. تفتح هذه الصفحة المولد مع تطبيق هذه المجموعة بالفعل، لذا فإن المعاينة أدناه توضح أنها تعمل على ثلاثة مربعات مرقمة في الوقت الحالي.
قبل استخدام flexbox، كان توسيط div يحتاج إلى اختراقات: الهامش: 0 يتم توسيطه تلقائيًا أفقيًا فقط ويعمل فقط على كتلة ذات عرض ثابت؛ التوسيط العمودي يعني الموضع: مطلق بهوامش سلبية أو خدعة التحويل، وكلاهما هش في اللحظة التي يتغير فيها حجم المحتوى. يتعامل justify-content مع المحور الرئيسي بينما يتعامل align-items مع المحور المتقاطع - حيث يتمركزان معًا في كلا الاتجاهين بغض النظر عن طول الطفل أو عرضه، وهذا هو بالضبط سبب تحول هذا الزوج إلى الإجابة القياسية.
اسحب أي عنصر تحكم أدناه وشاهد مربعات المعاينة الثلاثة تظل في المنتصف مع تغير شكل الحاوية، أو قم بإضافة فجوة بينها. عندما يبدو الأمر صحيحًا، انسخ كتلة CSS الموجودة في الأسفل مباشرة إلى ورقة الأنماط الخاصة بك - فهي تعمل بنفس الطريقة في كل متصفح حديث، دون الحاجة إلى مكتبة.